What aren't my paths working when I change the way I serve my index.html file?

Issue

I recently decided to update the way I serve my index.html file from

app.use('/', express.static(__dirname + '/..')); 

to

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname + '/../index.html'));
});

Both work fine as they both properly serve my index.html file. However when I switch to using app.get …

I can no longer get my paths to work in my index.html file.

For example, I have a .svg file inside my index.html file that it serves as follows:

<img src="dist/images/svg/favicon.svg" width="128" height="128">

The request which now fails ( 404 error ) looks like this in the console:

http://localhost:3000/dist/images/svg/favicon.svg

I have tried adding in the root directory as follows:

<img src="ll-server/dist/images/svg/favicon.svg" width="128" height="128">

but this does not help – both give 404 errors.

Why is changing the way I serve my index.html file breaking my paths inside the index.html file?

How can I fix this?

Solution

Why is changing the way I serve my index.html file breaking my paths inside the index.html file?

use runs some code for every URL which starts with the specified path. That code (static) looks at the URL, finds a matching file on the specified path, and serves up that file.

get runs some for for a specific URL (at least in this case because you haven’t used * or a parameter) and that code serves up index.html and only index.html.

Your images have stopped working because you removed the code which serves up the the HTML AND the images with code which serves up ONLY the HTML.

How can I fix this?

Put the code back the way it was. The changes you made are not reasonable.

——-

Then fix your security issue.

The directory you are serving your static files from is the parent if the directory your JS module lives in. This means you have given your JS module (and probably all your JS modules) URLs on your webserver.

Don’t expose your server-side business logic.

Change your directory structure. A typical one is:

 /            (containing the project)
 /src/        (containing the JS)
 /static/     (containing the static files)

Answered By – Quentin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0