Express js does not serve static files

Question

I have mounted path like this

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

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

// mount admin path
app.use('/admin', admin);

Then I defined some route e.g

admin.get('/jobs', function(req, res){ 
   res.render('jobs/index');
});

admin.get('/jobs/create', function(req, res){ 
   res.render('jobs/create');
});

In the first route static files such as js,css,images loaded w/o problems. But in second one it does not load files.

Files loaded in views like this

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

NOTE : styles directory is under public folder in my working directory.

So what is the problem ? What I did wrong ?

Use <link rel="stylesheet" href="/styles/css/main.css">. You need to add / at the starting for static assets. — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jul 22, 2016 at 15:56

oens · Accepted Answer · 2016-07-22 14:36:44Z

3

The static middleware is added to the admin express instance, which is mounted in the main app at the /admin route. This means it will never get called for routes other than those matching /admin. Move your middleware to the main app instance instead,

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

edited Jul 22, 2016 at 14:36

answered Jul 22, 2016 at 12:06

oens

3683 silver badges13 bronze badges

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

3 Comments

Ashot Over a year ago

That is the problem . I want to serve different static files for admin and for front. That's why I added different static folders . What is really interesting it works with /admin/jobs but does not for /admin/jobs/create.

oens Over a year ago

The reason it works for /admin/jobs, but not /admin/jobs/create is because you are using a relative path to your stylesheet. So for /admin/jobs it resolves to /admin/styles/css/main.css (which works), while for /admin/jobs/create it resolves to /admin/jobs/styles/css/main.css (which doesn't). You can instead use the absolute path /admin/styles/css/main.css, i.e. <link rel="stylesheet" href="/admin/styles/css/main.css">, which should work.

oens Over a year ago

Alternatively, if you always want to serve your stylesheet from the public url /styles/css/main.css, then simply create a separate route for it, along the lines of app.get('/styles/css/main.css', (req, res) => res.sendFile(...)). You can include logic in this route handler to determine what stylesheet to serve the user.

alejandromav · Accepted Answer · 2016-07-22 12:01:06Z

0

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

Then href="/styles/css/main.css"?

Hope it helps.

edited Jul 22, 2016 at 12:01

answered Jul 22, 2016 at 11:49

alejandromav

9631 gold badge11 silver badges26 bronze badges

3 Comments

Ashot Over a year ago

No . I modified code . added slash after public please have a look . Still does not work .

alejandromav Over a year ago

Well, public directory is accesbile for static files at / path. So the slash you added at the end does nothing. You have to access to absolute path /public from the views.

Ashot Over a year ago

Edited answer does not work even for the first route .

Collectives™ on Stack Overflow

Express js does not serve static files

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related