node.js script fails to GET static files

Question

I have a basic HTML index.html with a handful of containers, and I add bootstrap and font awesome folders to the <head> section of the file. Such as:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

Then, I wrote a web.js script to first initialize the server and then add those folders containing static files, in this way:

var express = require('express');
var app = express();
var fs = require('fs');

var buf = fs.readFileSync("index.html");
app.use(express.logger());

app.get('/', function(request, response) {
  response.send(buf.toString());
});

app.configure(function(){
    app.use(express.static(__dirname + '/assets'));
    app.use(express.static(__dirname + '/bootstrap'));
    app.use(express.static(__dirname + '/font-awesome'));
});

var port = process.env.PORT || 8080;
app.listen(port, function() {
  console.log("Listening on " + port);
});

However when I go to http://localhost:8080 I get 404 errors from GET commands trying to obtain bootstrap.css, etc. Any help? I tried different scripts obtained from stackoverflow but I can't seem to get it right. thanks!

dc5 · Accepted Answer · 2013-08-07 18:22:11Z

7

By initializing express.static in this way, you are telling it to look in those folders off of the root for the any requested files.

If you were to remove the paths:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">

Your static assets will likely be found. However, you are asking for headaches down the road as any duplicate filenames will result in the first being returned.

Instead, you might want to place all of your static assets under a single directory or add a different path parameter to your app.use statements to keep things better organized.

File layout:

public
 |-- bootstrap
 |-- font-awesome

Corresponding app.use statement (and remove the .. from your html paths):

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

or multiple static middleware (and remove the .. from your html paths):

app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));

HTML changes for either of the above:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

edited Aug 7, 2013 at 18:22

answered Aug 7, 2013 at 18:16

dc5

12.5k2 gold badges37 silver badges47 bronze badges

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

1 Comment

lllllll Over a year ago

that was a great explanation! And nice suggestion using public/ as well, makes it more easily organized and explicit in the <head>. thanks!

Ilya Zaytsev · Accepted Answer · 2013-08-07 18:17:42Z

2

Try in html:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

In node app:

app.use('/assets', express.static(path.join(__dirname, '/assets')));
app.use('/bootstrap', express.static(path.join(__dirname, '/bootstrap')));
app.use('/font-awesome', express.static(path.join(__dirname, '/font-awesome')));

answered Aug 7, 2013 at 18:17

Ilya Zaytsev

1,0551 gold badge8 silver badges12 bronze badges

1 Comment

lllllll Over a year ago

thank you very much! That worked perfectly too, I missed that first parameter of use() function. great!

Collectives™ on Stack Overflow

node.js script fails to GET static files

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related