Node.js rendering either html or css, not both

Question

Beginning my first node.js project and I'm finding that my code renders either the html with no styling, or the css code as plain text to the screen. I open the page and see the html code, change nothing but hit refresh, and I see the css, and it switches back and forth every time I hit refresh. Can anyone tell me how to get it to apply the styling? Thanks. My code:

    http.createServer(function (req, res) {
    if(req.method.toLowerCase() == 'get'){

      fs.readFile('path\\to\\index.html', function (err, data) {
        if (err) console.log(err);
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(data);
        //res.end();
      });

    }
    if(req.method.toLowerCase() == 'get'){

      fs.readFile('path\\to\\mystyle.css', function (err, data1) {
        if (err) console.log(err);
        res.writeHead(200, {'Content-Type': 'text/css'});
        res.write(data1);
        //res.end();
      });

    }

}).listen(4000, '127.0.0.1');
console.log('Server running at http://127.0.0.1:4000/');

The reason I have the 'res.end()'s commented out is that when I left either or both of them in, I got a 'write after end' error. But I presume my problem is somewhere in that?

Edit: Just to add, I get the same problem if I remove both IF statements. If I enclose both readFiles within the same IF statement, I get the 'write after end'.

You should add a conditional checking whether the requested file is the html or the css. At the moment, your code attempts to return both as response, in parallel... Have you considered using `express` or something similar to simplify this work? — Mehdi, Feb 24 '16 at 13:31
See also: [this answer](http://stackoverflow.com/a/8427954/1006854) — Mehdi, Feb 24 '16 at 13:34
Thanks @mef, switch statement added and it works now, thanks. I like doing things the hard way :) — Meelah, Feb 24 '16 at 13:40
@Meelah, you can answer your own question with the correct code, it might help other people. — mihai, Feb 24 '16 at 14:11

score 0 · Accepted Answer · answered Feb 24 '16 at 15:38

This is what worked in the end:

var http = require('http');
var fs = require('fs');
var formidable = require("formidable");
var util = require('util');
var url = require('url');

var html;
fs.readFile(__dirname+'\\index.html', function(err, data) {
    if (err){
        console.log(err);
        response.writeHead(404, {'Content-Type': 'text/html'});
    }
    html = data;
});

var css;
fs.readFile(__dirname+'\\mystyle.css', function(err, data) {
    if (err){
        console.log(err);
        response.writeHead(404, {'Content-Type': 'text/html'});
    }
    css = data;
});

var js;
fs.readFile(__dirname+'\\management.js', function(err, data) {
    if (err){
        console.log(err);
        response.writeHead(404, {'Content-Type': 'text/html'});
    }
    js = data;
});

var server = http.createServer(function (request, response) {
    switch (request.url) {
        case "/mystyle.css" :
            response.writeHead(200, {"Content-Type": "text/css"});
            response.write(css);
            break;
        case "/management.js" :
            response.writeHead(200, {"Content-Type": "text/javascript"});
            response.write(js);
            break;
        default :    
            response.writeHead(200, {"Content-Type": "text/html"});
            response.write(html);
    };
    response.end();
})
server.listen(4000);
console.log('server is listening at 4000');

You could easily put all the code inside the createServer function but the key is the switch.

Node.js rendering either html or css, not both

1 Answers1