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
Related
I'm using Aurelia CLI (v1.2.0) with webpack (v4.41.0). Running the command au build --env prod works well and all necessary files are placed in a dist folder relative to the project's root as expected. However, a problem I'm seeing is the following in the generated .html file:
...
<body aurelia-app="main">
<script type="text/javascript" src="/runtime~app.66066bc9a3f8c86e3d5a.bundle.js"></script>
<script type="text/javascript" src="/vendor.bluebird~01be3b92.3dbcbc269195ad05c865.chunk.js"></script>
<script type="text/javascript" src="/vendor.setimmediate~a1c951f6.42ef81a6d814b4bc894f.chunk.js"></script>
<script type="text/javascript" src="/vendor.process~16c59945.ef28f3259f949d41518b.chunk.js"></script>
<script type="text/javascript" src="/vendor.moment~399b027d.9b9b0283b72b7237fb27.chunk.js"></script>
...
You see the src="/file_name_here" part in these script tags is not going to work as it's looking for files at the root of the main hard disk, not relative to the HTML file. If I add src="../file_name_here" then all works fine. Am I missing a webpack configuration somewhere?
Thanks for the assistance.
in your project, you have a webpack.config.js file.
there you should find the baseUrl property. change it to whatever suits you best.
for example: I want the bundle files to be in the same directory of the index.html file, regardless of their respective path on the server. (they will not always be in the root of my server).
so I just change the default '/' to '' (empty string.)
New to JS, working on a D3 visualization and when I server my html file that has the JS script:
<script src="visualization.js" type="text/javascript"></script>
I end up getting this error message:
Failed to load resource: the server responded with a status of 404
(Not Found) visualization.js:1 Failed to load resource: the server
responded with a status of 404 (Not Found)
I've tried the following proposed solutions that I found on this site and others but nothing seems to work. I've tried:
Making the path more detailed by trying Map1/visualization.js and other variations of this with the correct directories.
Clearing the Cache and all browsing data.
Placing the js file inside the same directory as your HTML file (did that from the start)
Anyone know a solution? Not sure what is wrong.
My html file code:
<!doctype html>
<html>
<head>
<meta charset= "utf-8">
<style>
*{
font-family: "Helvetica Neue";
}
p {
font-size: 0.85em;
}
svg {
background: #efefef;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- Socket io !-->
<script src="/socket.io/socket.io.js"></script>
<!-- D3 Link !-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<!-- Topojson library !-->
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- Visualization file -->
<script src="visualization.js" type="text/javascript"></script>
</body>
</html>
All my files for this project are inside the directory Map1.
Map1:
-map1.html
-package.json
-server1.js -> the file to that serves my html file
-visualization.js
-world.topojson``
It sounds like you're running the server from a different working directory to where the HTML/JS files are stored. If you have this directory structure:
app
└── static
├── index.html
└── visualization.js
... and you've launched the server from the app directory, then the browser will be looking for visualization.js here:
app
├── static
│ └── ...
│
├── index.html
└── visualization.js <-
Make sure you're running the server from the same directory which contains the visualization.js.
1. Step 1
Firstly, Make Sure that your Java Script file visualization.js is still exists or check that according to you,visualization.js should located in the same directory which your html file located.
2. Step 2
But if it isn't thats the reason for getting 404 error,I recommend you to
check the directory which your visualization.js file currently exists.
Try this;
Eg:- <script src="directory/visualization.js" type="text/javascript"></script>
In here I mean by directory is the directory what your visualization.js is currently located.
I have a few:
try putting the './visualization.js' in src.
Check the spelling.
Put this line at the end of the tag.
You can use an npm package assets.
After using it you may use method resolver.path().
Now, instead of writing this:
var url = '/assets/images/icons/create.png';
You can write this:
var url = resolver.path('icons/create.png');
I keep getting
when I try to link two of my scripts together when I put 'webpack app.js bundle.j' in the command line
bash: /usr/local/bin/webpack: No such file or directory
Jaffers-MacBook-Pro:test JafferSyed$
I am not sure what is the problem
HTML
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
JS (app.js)
var math = require('./math.js');
I am trying to require the math.js in the /node_modules/mathjs
here is what my node modules folder looks like
enter image description here
Here is what my files list looks like
enter image description here
I am presumed to believe that a bundle.js file should appear when I am to add 'webpack app.js bundle.js' on the command line of my terminal
I am not sure as to why there it says no such file or directory
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?
I have error and am trying to solve it for hours.
My file structure:
-/node_modules
-/www
---bundle.js
---index.html
in index.html I have such code
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="bundle.js"></script>
Problem is bundle.js is included fine, but ng-cordova.min.js gives 404 error
Cannot GET /node_modules/ng-cordova/dist/ng-cordova.min.js
Edit: I also tried this without success
<script src="/node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
I don't use express or express.static.
Judging by your project structure I'm betting that it is powered by Express.js. I'm also betting that the www folder was set as a static folder in the express app like this:
app.use('/', express.static(path.join(__dirname, www)));
In which case your server will only serve files located in the www folder. You need to include any client dependencies in the www folder:
-/node_modules/
-/www/
--lib/
---ng-cordova/
--bundle.js
--index.html
And then load them like so:
<script src="lib/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
UPDATE
Simply put node_modules inside the www folder, it should work fine.
The problem here is that you try to load your ng-cordova.min.js file from the index.html folder.
You should change:
<script src="node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
For this:
<script src="../node_modules/ng-cordova/dist/ng-cordova.min.js" type="text/javascript"></script>
You are trying to load the file from the wrong directory.
You either have to use this path:
src="../node_modules/
or this:
src="/node_modules"
in case the above directory is your root directory.
What's also confusing is that the line you commented the error in is not the line the error actually comes from. Why are you trying to link to the file twice?
//Edit: As Romain was a minute faster than me he deserves the right answer reward I'd say :P Only if it actually solves your problem ofc :D