express.static only loading to index.html

Question

I am trying to get the static files (images, js, css) which are all inside the public folder to be available to all my routes. I am able to ONLY load them to the index.html. The management.html files does not have access to the static files, I am getting 404 error on the Chrome console.

Folder Structure:

-app/  
---index.html
---management.html
---public/
------css/
------js/
------img/

server.js:

const express = require('express');
const path = require('path');

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.sendFile('index.html', {root: __dirname })
});

app.get('/management', function(req, res) {
    res.sendFile('management.html', {root: __dirname })
});

app.listen(3000);

Please show how you reference the files in management.html — Duncan Lukkenaer
– Duncan Lukkenaer, Commented Jun 3, 2017 at 14:33
Use absolute paths (starting with a /), not relative, in your HTML code. — robertklep
– robertklep, Commented Jun 3, 2017 at 14:34

Duncan Lukkenaer · Accepted Answer · 2017-06-03 14:44:40Z

2

Inside your HTML files you are probably referring to the relative paths of the static files. For example: <img src="img/example.png">. This link will be based on your current location.

When your current location is http://example.com/ (index.html), then it will refer to http://example.com/img/example.png, where the file is probably located.

But when your location is http://example.com/management (management.html), it refers to http://example.com/management/img/example.png, which will return a 404.

Using the absolute path of this file will solve this problem. You can do this by putting a / in front of the relative path: <img src="/img/example.png">. Alternatively you could use a relative path in management.html like this: <img src="../img/example.png">.

answered Jun 3, 2017 at 14:44

Duncan Lukkenaer

14.2k19 gold badges75 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

0xtimur Over a year ago

How come the absolute path starts inside my public folder and not my app folder?

Duncan Lukkenaer Over a year ago

@TimurOzkul That's due to the express.static(path.join(__dirname, 'public')). This basically says that the public folder is the root of your static files.

Collectives™ on Stack Overflow

express.static only loading to index.html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related