Linking css files to node.js server

Question

So I have craeted a node.js server with two routes. I use the fs to get the html files from the views folder and then append them to the page. In those html files I have a normal link to the css file, which does not seem to work. Here is my node.js app:

var port = 1357;

var http = require('http'),
    path = require('path'),
    mime = require('mime'),
    fs = require('fs');

var app = http.createServer( function(req, res) {

    if (req.url === '/home') {
        fs.readFile('views/index.html', function(err, page) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(page);
            res.end();
        });
    }

    else if (req.url === '/about') {
        fs.readFile('views/about.html', function(err, page) {
            res.writeHead(200, {'Content-Type': 'text/html'});
            res.write(page);
            res.end();
        });
    }

        else {
            res.writeHead(301,
              {Location: '/home'}
            );
            res.end();
        }
});



app.listen(port);
console.log('Server running on port: ' + port)

In the html files I have:

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

It does not work. In chrome's console I get "Resource interpreted as Stylesheet but transferred with MIME type text/html. "

Answer 1

You defined 2 routes: /home and /about. You also defined that anything apart from these two routes should default to an HTTP redirect to the /home route, and this is what causes the problem.

When the browser encounters the link to the css file, it requests the following URL: /styles/styles.css . the server receives this URL and since it doesn't match the two defined routes it will go into the else statement which will send a redirect to /home, so your browser, asking for a css file, will only receive the html page located in /home.

To fix this, you might need to add a new rule for your css file:

else if (req.url === '/styles/styles.css') { fs.readFile('styles/styles.css', function(err, page) { res.writeHead(200, {'Content-Type': 'text/css'}); res.write(page); res.end(); }); }

Of course, if you have more css files you need to manage a specific folder instead of files. I suppose you're doing this to learn Node, because if you don't you might want to use express which is a Node ready to use web server that will save you lot of time.

Answer 2

When the client (the browser) asks the server for /styles/styles.css the server responds with 301 Moved Permanently and Location: '/home' .

The browser then asks for /home and gets an HTML document, which is not a stylesheet.

You have to give the browser the stylesheet when it asks for it.

Answer 3

static assets (as in your stylesheets) wont be served automatically. So what happens is that it falls through and lands at the 301 redirect to /home, where you serve text/html. If you want to serve css that way, add a rule req.url==="/styles/styles.css"

Generally, I would recommend using a routing lib like express or koa . Or as minimum, connect . They make it easy to hook in features called middleware and enable you to make everything in a directory (like /public) serve static content with one rule.