Getting 404 for stylesheets and js on sample express-jade project

Question

I have created a simple static page in nodejs using the default express library. However, when I run it, nodejs is unable to pick up the public files and throws 404 on them.

I believe that the paths that I have given are correct. This is driving me mad. I knoww the problem has to be so tiny and simple to be face-palm worthy but I am unable to find it.

Can you please help me here.

The code is on github at Rishavs/ComingSoonPage

Thanks for your time and help.

~ Rishav

Answer 1

The express.static method does not include subfolders recursively. Your scripts and styles are under public/javascripts and public/stylesheets respectively. You have to let express know those folders contain static files that should be served directly, like so:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
  app.use('public/javascripts', express.static(path.join(__dirname, 'public/javascripts')));
  app.use('public/stylesheets', express.static(path.join(__dirname, 'public/stylesheets')));
});

The last two lines are the important ones. Note that there are two arguments passed to the app.use method. The first one tells what is the path where the script will be served (a.k.a. what you'd have to type in the browser to get it). The second one is the physical location of the file on the server.

Answer 2

In your app.js, mount the static files earlier, like so:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(path.join(__dirname, '/public')));
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
});

Edit: Note the in /public VS public

Answer 3

Like markt mentioned. Your html should not be referencing "public".

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

vs.

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

Answer 4

In my case it was necessary to specify sub directories, as well as the main "public" static directory, eg:

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

Also after playing around I found that it made no difference whether the "public" static directory was declared as "/public" or "public" (with or without leading slash).

However it did make a difference if I missed the leading slash from the sub directories, ie this gave me 404:

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

but this worked ok:

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

And of course the old chestnut of making sure permissions are correctly set on the directory!

Answer 5

I am using express 2.5.8 I was able to access public like this:

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

Then I noticed that when I have something like this in my layout:

<link rel="stylesheet" type="text/css" href="style.css">

It wasn't serving my style.css as expected, it was expecting me to do something like

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

added the following to my app.js file solved it for me:

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

Everything looked like so:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'handlebars');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
  app.use(express.static(__dirname + '/public/stylesheets'));
  app.use(express.static(__dirname + '/public/javascripts'));
});