Node.js server gives problems with scripts and images

Question

Node.js server gives problems with scripts and images

I just started using node js and I've moved one of my websites on it:

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

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

    fs.readFile('./index.html', 'utf-8', function(error, content) {
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.end(content);
    });
});
app.listen(8080);

The index.html is my website home page. With only html it works, but if i put tags in it (for including jquery for example), it gives JS errors in firebug : Uncaught syntax error : unexpected token < in jquery.js, and then of course '$ is undefined'. It doesn't load images either.

I don't really need to do some routing or use Express framework or anything, it's just a simple one-page website. What am I doing wrong ?

javascript
jquery
node.js

Answer 1

Your server isn't handling requests for images or other resources. All requests are given the same response of the ./index.html page.

This means that if an external script or an image is included in the page, when a request is made by the browser for those resources, the original index.html page will be delivered instead.

NodeJS is fairly low-level. You need to set up your server to manually handle requests for different types of resources based on the URL for each request.

Your best bet will be to read through some NodeJS tutorials. They should cover the basics of serving content, though many of them won't deal with the lower-level details, and will suggest packages like Connect or Express.

Change your code to this, and you'll see all the resources being requested.

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

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

    var pathname = url.parse(req.url).pathname;
    var ext      = path.extname(pathname).toLowerCase();

    console.log(pathname);

    if (ext === ".html") {
        fs.readFile('./index.html', 'utf-8', function(error, content) {
            res.writeHead(200, {'Content-Type' : 'text/html'});
            res.end(content);
        });
    }
});
app.listen(8080);