nodejs express css and js not loaded

Question

I use express on nodejs. The html-file I load doesn't get java-scripts and css-files.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
     <h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>

This is my express-part in nodejs:

app.get('/', function(req, res){

    console.log(req.path);

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
            res.write(data);
            res.end();
        }
        else
        {
            res.writeHead(400, {'Content-Type': 'text/html'});
            res.end("index.html not found");
        }
    });
});

The only console.log is "/" once. The css and js file isn't even requested.

Edit:

I used the static middleware but it doesn't work either:

app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res){

    fs.readFile('mongo_client/index.html',function (err, data){
        if(!err)
        {
            res.send(data);;
        }
        else
        {
            res.send("index.html not found");
        }
    });
});

Therefore I put my js and css - data to the public - folder. Everytime I try to connect I download the index.html file. Does anyone have a working example for a simple webserver using express? Do I have to use the file-reader ... I think there's another way using express-middleware.

I just need a simple example of an express web-server that is supporting css and js ... I can't find anything that's just that basic.

with express you don't need res.writeHead, res.write, res.end. Just do res.send(data). And in the err condition, just print the err with console.log(err) to see if there is any problem reading the file. — Mukesh Soni, Mar 07 '14 at 15:19
Are you saying it doesn't even get jQuery from the CDN, or just the local files. Do you have a static route for static files? — adeneo, Mar 07 '14 at 15:21
jQuery is getting loaded. I don't have a static route. If I res.send(data) I download the site. — marcel, Mar 07 '14 at 15:23
Then add a static route, something like `app.use(express.static(__dirname + "/public"));` — adeneo, Mar 07 '14 at 15:26

Matt Pileggi · Accepted Answer · 2014-03-09T20:01:51.687

3

app.get('/') will only respond to requests at the root, not anything beyond that. Your css and other assets are at /css/bootstrap.min.css which your route doesn't handle.

But for express, use the static middleware to do all that for you. http://expressjs.com/api.html#middleware

This article also explains the setup http://blog.modulus.io/nodejs-and-express-static-content

Update: a sample app

Express is capable of generating a sample app that supports static, with optional support for CSS pre-processors. Read their guide: http://expressjs.com/guide.html but the basic steps are to install express globally

npm install -g express

Then use the command line to generate the skeleton of your app

express --css stylus myapp

The above provides support for Stylus. You can specify less if you prefer. Or to generate it with support for basic css files

express myapp

Then cd into myapp, or whatever name you provided, and you can see how it's done.

edited Mar 09 '14 at 20:01

answered Mar 07 '14 at 15:22

Matt Pileggi

7,126
4
16
18

What is package.json for and how do I use it? And why am I downloading the index.html when I use res.send(data)? – marcel Mar 07 '14 at 15:36
package.json describes your node module/app and all of it's dependencies. You use it whenever you do npm install. You can also define scripts in there if you want to npm start for example. But other than that it won't come into play for you unless you are distributing an NPM module. – Matt Pileggi Mar 07 '14 at 15:39
I was getting an error that the express command was not found after installing it on a mac. Solution found at: http://stackoverflow.com/a/23008130/700533 – Michael Hogenson Aug 24 '14 at 01:05

nodejs express css and js not loaded

1 Answers1

Linked