Question

I have the following basic script running in nodejs to serve up an html file with an associated css stylesheet:

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

var serverPort = 8080;

var server = http.createServer(function(request, response) {

console.log('request starting ...');
var extname = path.extname(request.url);

var contentType = 'text/html';
    switch (extname) {
    case '.js':
        contentType = 'text/javascript';
        break;
    case '.css':
        contentType = 'text/css';
        break;
    }

fs.readFile('js/EmailDisplay/htm/index.html', function(error, content) {
    if (error) {
        console.log(error);
        response.writeHead(500);
        response.end();
    } else {
        console.log(contentType);
        response.writeHead(200, {'Content-Type': contentType});
        response.end(content,'utf-8');
    }
});
});

server.listen(serverPort);
console.log('Server running at localhost:' + serverPort +"/");

If I open the file in Firefox (File->Open File), it renders properly. If I go to localhost:8080 the index page is served but without the style applied to it. Why? The console.log in the fs.readFile block shows me that both files are being read.

PS – I know there are packages that will let me do this blindly (eg. ‘connect’) but I’m trying to understand what is actually happening before going that route.

Answer 1

The problem lies probably in this line:

 fs.readFile('js/EmailDisplay/htm/index.html', function(error, content) {

You’re reading and returning to the client the same html file, even when .js and .css are requested.

You should probably set the path to the file along its content type in the switch you have earlier in your code.