Geek Answers Handbook

Getting 404 for stylesheets and js using the express jade project as an example

I created a simple static page in nodejs using the standard express library. However, when I run it, nodejs cannot pick up the public files and imposes 404 on them.

I believe that the paths I have given are correct. It drives me crazy. I know that the problem should be so tiny and simple to be worthy of the palm of your hand, but I cannot find it.

Could you help me here.

The code is on github at Rishavs / ComingSoonPage

Thanks for your time and help.

~ Rishav

+4
source share
5 answers

The express.static method express.static not include recursive subfolders. Your scripts and styles are under public / javascripts and public / stylesheets respectively. You must report that these folders contain static files that must be sent directly, for example:

 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 important. Note that there are two arguments passed to the app.use method. The first one says what is the path that the script will be served on (aka what you would need to enter into the browser to get it). The second is the physical location of the file on the server.

-3
source

In your app.js install the old files before:

 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); });

Change Pay attention to /public VS public

+4
source

As mentioned above. Your html should not be referenced as "public".

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

vs.

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

In my case, it was necessary to specify auxiliary directories, as well as the main "public" static directory, for example:

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

Also after the game, I found that it doesn’t matter if the “public” static directory was declared as “/ public” or “public” (with or without a leading slash).

However, it did matter if I skipped the leading slash from the subdirectories, i.e. it gave me 404:

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

but it worked fine:

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

And, of course, an old chestnut, certifying that the permissions are correctly set in the directory!

+1
source

I am using express 2.5.8. I was able to access this publication as follows:

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

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

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

It did not serve my style.css, as expected, it expected me to do something like

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

added the following to the app.js file:

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

Everything looked like this:

 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')); });
0
source

More articles:


All Articles