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. "

What you're really missing is a static route for static files, but the way you've set up the server with a catch all route and then if/else statements to check the URL's seems somewhat complicated and rigid. I'd suggest looking at Express. — adeneo
– adeneo, Commented May 1, 2014 at 13:12

disklosr · Accepted Answer · 2014-05-01 13:18:02Z

2

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.

answered May 1, 2014 at 13:18

disklosr

1,63619 silver badges28 bronze badges

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

1 Comment

Boyan Hristov Over a year ago

Thanks a lot! Yes, I know a few things about express, but there everything is already done for me. I am a beginner in node as you guessed, so everything I do now is just practise

Quentin · Accepted Answer · 2014-05-01 13:09:02Z

1

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.

answered May 1, 2014 at 13:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

japrescott · Accepted Answer · 2014-05-01 13:13:25Z

1

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.

answered May 1, 2014 at 13:13

japrescott

5,0633 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Linking css files to node.js server

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related