Load static files in express.js

Question

I using express to build web app. I have problems with routes or static files. I added reference to static files:

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

and set routes:

app.use('/', routes);
app.use('/users', users);
app.use('/blog', blog);

In my blog router:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('blog/index');
});
/* GET registration form. */
router.get('/registration', function(req, res) {
  res.render('blog/registration');
});

module.exports = router;

So my problem: When I go to /blog my static files loading correctly (without blog in path). But when I go to /blog/registration I get error (with blog in path):

GET /blog/stylesheets/css/bootstrap.min.css  registration:1
GET /blog/stylesheets/lib/og-component.css  registration:1
GET /blog/stylesheets/lib/venobox.css  registration:1
GET /blog/stylesheets/lib/zocial.css  registration:1
GET /blog/stylesheets/lib/font-awesome.css  registration:1
GET /blog/stylesheets/lib/animate.css  registration:1
GET /blog/stylesheets/css/style.css  registration:1
GET /blog/stylesheets/css/scheme/light-blue.css  registration:1
GET /blog/js/lib/modernizr.custom.js  registration:1
GET /blog/images/jssolutions-logo.png 404 (Not Found)

How I can fix this problem: load static files without blog in path:

/stylesheets/css/bootstrap.min.css

@AlexanderBrevig ~/ will only work if some server-side processing resolves it - HTML doesn't understand the tilde. — James
– James, Commented Oct 13, 2014 at 12:30

James · Accepted Answer · 2014-10-13 12:26:55Z

2

This has nothing to do with express or static but more to do with how you are referencing your static files from your webpage. Specifically, if your URLs look like

<link href="stylesheets/stylesheet.css" rel="stylesheet" />

Then these are assumed to be relative to the current URL root. For example, if the current URL is /blog, then the root is / hence the script is loaded from /stylesheets/stylesheet.css. So in your scenario, if the URL is /blog/registration, then the root is /blog/ hence the script is loaded from /blog/stylesheets/stylesheet.css.

If all the static files are expected to be loaded from the website root then place a forward slash at the beginning

<link href="/stylesheets/stylesheet.css" rel="stylesheet" />

answered Oct 13, 2014 at 12:26

James

82.4k19 gold badges172 silver badges245 bronze badges

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

Comments

graemeboy · Accepted Answer · 2014-10-13 12:20:44Z

2

If your stylesheets and other static content is stored in the /public folder, and you have included the statement:

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

Then your html should just look like this:

<link href="/stylesheets/stylesheet.css" rel="stylesheet">

That should find them even if you're within /blog/, otherwise it seems like you're using a relative path.

answered Oct 13, 2014 at 12:20

graemeboy

6205 silver badges12 bronze badges

Collectives™ on Stack Overflow

Load static files in express.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related