CODEWITHSUNDEEP
javascriptnode.jsexpress
atasca10
atasca10

Reputation: 37

Failed to load resource: the server responded with a status of 404 (Not Found) https://websitename.herokuapp.com/js/bootstrap.js

I'm running a node.js server on heroku using the express.js framework.

Here is what my server looks like:

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/static'));
var port = process.env.PORT || 8000;

app.listen(port);

My index.html file has the following javascript links:

<script src="/js/chartview.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/bootstrap-select.js"></script>

My directory system looks like this:

server.js
/static
    -index.html
    -/js
        -bootstrap.js
        -bootstrap-select.js
        -chartview.js
    -/css
        -bootstrap.css
        -bootstrap-select.css
        -styles.css

Chrome displays my html page with the appropriate css styles but the console says:

Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/chartview.js
Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/bootstrap.js
Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/bootstrap-select.js

It loads properly when I change my index.html tags to look like this:

<script src="chartview.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-select.js"></script>

And I change my directory systems to look like this:

server.js
/static
    -index.html
    -bootstrap.js
    -bootstrap-select.js
    -chartview.js
    -/css
        -bootstrap.css
        -bootstrap-select.css
        -styles.css

This is not Ideal, as I would like to have a /js folder.

Any suggestions will be greatly appreciated!

Upvotes: 3

Views: 77788

Answers (3)

MacInnis
MacInnis

Reputation: 758

Try Placing your files in the public folder and use the path like this""

Upvotes: 1

Aniket Sinha
Aniket Sinha

Reputation: 6031

From the console error, https://websitename.herokuapp.com/js/chartview.js, the file is not being checked in static folder.

So, change your index.html to include scripts like this.

<script src="js/chartview.js"></script> i.e remove / from beginning. as path is relative to index.html.

Follow same process for other three files.

Also, you mentioned that the CSS files are loaded correctly. Can you show how exactly are you including those css files? i.e the path for css.

Comment here, if that doesn't help.

Upvotes: 12

Arthur Zhang
Arthur Zhang

Reputation: 1537

Don't use "__dirname" Only using 

app.use(express.static('static'));

Upvotes: -1

Related Questions