ExpressJs 404 on CSS File

Question

So I am trying to learn how to use expressJS and nodeJS and I am runnning into a problem where the CSS file can't be found (404 error) when I start the server and load the html page. The html page loads fine, but it is not styled when I have the server load it. When I load the page without the server, the page is styled. Here is my code for express and node file:

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

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

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

app.listen(3000);

The html link for the css is:

<link href="public/main.css" rel="stylesheet">

The file structure is

FrontEnd(folder)
- index.html
- index.js
- public(folder)
  - main.css

What am I doing wrong? I have googled and looked at documentation but have not figured out the problem so far.

noted, see my answer. If, with that sorted, you still get a 404, make sure that file exists, and make sure the filename is exactly as it exists on disk. If you have "Main.css" but link to "main.css", those are not the same files. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jan 28, 2016 at 7:30

Mike 'Pomax' Kamermans · Accepted Answer · 2016-01-28 07:25:37Z

You made an incorrect assumption about how the static binding works. The following instruction:

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

tells express that "any resources requested on / that have no explicit routes bound for this app should be resolved through the filesystem; specifically, they should be looked for in the ./public directory".

So, if someone asks for /cats.git, and express doesn't see an explicit route binding for that in your app, it will then check the ./public dir relative to where it's running, trying to find a file called cats.gif and return it if it can find it (or send a 404 if it can't).

As such, what that dir is in your filesystem is irrelevant to the user of your site: they'll simply resolve things against a clean path, so if you have a file ./public/main.css that you just want to serve as static content, then your CSS link should be:

<link href="main.css" rel="stylesheet">

And then express will see a request for /main.css, it'll notice there are no explicit routes defined for it, and will then try to find main.css in your static dir(s). It'll find ./public/main.css, and then simply send that back as response for /main.css.

Ganesh Karamala · Accepted Answer · 2016-01-28 05:39:20Z

0

Try this code

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

HTML
<link href="main.css" rel="stylesheet">

edited Jan 28, 2016 at 5:39

answered Jan 28, 2016 at 5:14

Ganesh Karamala

5131 gold badge7 silver badges13 bronze badges

1 Comment

Solstice Over a year ago

Checked your code, and I even modeled it after yours and tried that, still getting the 404 error.

Collectives™ on Stack Overflow

ExpressJs 404 on CSS File

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related