I have a simple express app which renders some config for the client bundle to use:
const config = config.get('client');
const HTML = `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="client"></div>
<script>
window.config = ${JSON.stringify(config)}
</script>
<script src="/bundle.js"></script>
</body>
</html>
`;
res.status(200).send(HTML);
For production I want to host a static version of this on AWS s3. I want a static version of the html above with both the stringified config and the webpack bundle.js including the hash.
For this I think I need a small express server that pulls in a templated version of the html above which will get populated with the config and the webpack bundle name and then written as index.html in the dist folder.
I intend this script to be run from an npm script:
scripts: {
build-html: node render-static.js,
},
Once this has run the next step would be to upload it to an s3 bucket so that would require another node script that would need to run. I might end up with a final npm run deploy that runs:
npm run build-html && npm run-deploy-static
I'm not sure if there is a better / more accepted way of doing this sort of thing? Is it correct to be running two node scripts in order to be deploying a part of my app?
Related
When i want to put js file i get this error
GET http://localhost:3000/src/app.js net::ERR_ABORTED 404 (Not Found)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pug with Java</title>
</head>
<body>
<script src="src/app.js"></script>
</body>
</html>
Structure of the project
You need to build your app. If you open package.json you will see scripts to build the app.
Build it and include the js from build folder. If your index.html and js file is in same location you dont need to src/ in script src.
Most probably app.js will be changed to main.js after build. Check it in build folder.
Build command will be something like
npm run prod
or
npm run prod-en
Once you do a build you will not have the src folder.
In which file is your HTML? If it's in index.pug you should try <script src="app.js"></script> as it's in the same folder.
if you use express.js ,try this ,
add this code app.use(express.static(path.join(__dirname, ""))); into your app.js to identify the exacly path. to your file.js
I made a UI using html and css that takes input as file path. What I need is now to enable my python file to take that path name and run the python script on the input file. How can I achieve this? I saw there is something called eel. but I need this app to be distributed so everyone who installs wont have a chrome installed to run in eel. Please provide me with different alternatives to link these two. I'm quite new to web app.
After some research in Eel and PyInstaller, I found it's quite easy. I tested these instructions in Windows and the example code is from Eel GitHub.
Environment Setup
Install pipenv package to setup a virtual environment:
$ pip install pipenv
Install eel, pyinstaller to virtual environment:
$ pipenv install eel pyinstaller
Due to this issue, we need to install setuptools==44.1.0:
$ pipenv install setuptools==44.1.0
Project Setup
Here is the file structure:
.
├── hello.py
└── web
├── favicon.ico
└── hello.html
The content of hello.py is:
import eel
eel.init('web')
#eel.expose
def say_hello_py(x):
print('Hello from %s' % x)
say_hello_py('Python World!')
eel.say_hello_js('Python World!')
eel.start('hello.html', size=(300, 200))
The content of hello.html is:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<script type="text/javascript" src="/eel.js"></script>
<script type="text/javascript">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
eel.expose(say_hello_js);
function say_hello_js(x) {
console.log("Hello from " + x);
}
say_hello_js("Javascript World!");
eel.say_hello_py("Javascript World!");
</script>
</head>
<body>
Hello, World!
</body>
</html>
Building
Run following command:
$ pipenv run python -m eel hello.py web --onefile --noconsole
You will see a hello.exe under dist folder.
Any more detail you can read the documents of Eel and PyInstaller.
but I need this app to be distributed so everyone who installs wont have a chrome installed to run in eel.
I think you can use Edge in Eel since Edge is installed in every Windows 10, or you may need to use other python GUI framework. Since you write you UI in html and css, I think is may not be possible to distribute without any browser.
I am new to reactjs and trying to install babel to run babel code without serving HTTP file. By following the Package Manager I have installed it with browserify as:
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify ] main.js -o bundle.js
After it I created the file .babelrc in the same root directory with following code
{ "presets": ["react"] }
And removed the HTTP babel-core source file as:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- removed https://npmcdn.com/babel-core#5.8.38/browser.min.js -->
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('content')
);
</script>
</body>
</html>
but when I access it from http://localhost/react/ this doesn't work.
You haven't included the code that's failing or the error message, so this is a guess.
The problem is that when you run browserify, it transpiles (converts) the code you specify from ES2015 to plain old Javascript. So, when you do this:
browserify -t [ babelify ] main.js -o bundle.js
You're converting the code in main.js and writing it to bundle.js.
So there are two problems with your code:
you never include bundle.js in your HTML file. You need to add <script src="build/bundle.js"></script> to load the code that you transpiled.
the code in your HTML <script> block is not touched by browserify. Your build step (running browserify) is working on scripts, not on HTML files. So that code never gets transpiled and fails when the browser tries to execute it.
The reason it works when you include babel-core in the HTML is because Babel has a special "live" transpilation mode which will transpile your code when the page is loaded, and this mode DOES get the code in the <script> block because it's all running on the user's browser.
I'm running a node.js server. In the node I require and run the module by using
var h = require('h.js');
h.hello();
This prints Hello World to the console. However, I want to be able to run the code from h.js from a page(entrypage.html) in my browser as well. I try to import it by
<script type="text/javascript" src="/node_modules/h.js"></script>
However, this gives a 404 error when run on localhost.
GET http://localhost:8080/node_modules/h.js
How do I get access to this javascript file on the HTML page?
My file structure has a root with html/, js/, node_modules/ and server.js. The HTML page is inside html/, the js file in node_modules/
EDIT: I'm using the MEAN stack for this - MongoDB, Express.js, Angular.js and Node.js.
It should be possible to serve the file using express.static (Example: app.use('/node_modules/', express.static(__dirname + '/node_modules/'));), but I highly advise against serving node_modules and backend-specific files in the frontend!
first define path for your static resource which is your CSS,JS,Images etc.
app.use(express.static(path.join(__dirname, 'node_modules')));
then in html
<script type="text/javascript" src="h.js"></script>
NOTE :
Try to avoid to use node_modules folder for source path of your static resources
To be honest I'm not exactly sure what you're trying to achieve, I take it that you want to run the code in the browser just like running code in the node.js environment using require to include packages like h.js from npm.
If that's what you want to do I would recommend using a tool like browserify or webpack which collects your code and puts it into a file which can then be used in a web browser.
I'm new in angular, bower, grunt, etc stuff so I completely stuck with current issue.
My project is built based on angular.
In my index.html path to js/css like this
<script src="/scripts/shared/flow-item.js"></script>
after compiling with grunt path to js/css in index.html
<script src="scripts/app.da1aee60.js">
so that if i deploy project in ROOT on tomcat everything works perfect
but if i deploy it in some folder like MyProject/ and call index.html we see application still looks for scripts by path http://localhost:8080/scripts/app.da1aee60.js instead http://localhost:8080/MyProject/scripts/app.da1aee60.js
Is it possible in some say project look for script in proper path?
You can set base path in html (inside head tag):
<base href="/scripts/MyProject/" />