Building a Complete Static File Server with Node.js

Problem Analysis

Many beginners in Node.js encounter an issue where their server only displays the HTML content but not the associated resources such as images, CSS, or JavaScript. This typically occurs because the server is configured to always return a single HTML file, regardless of the request path. For instance, the code snippet provided in the question uses fs.readFile to load an HTML file and serves it for every request, which leads to broken references to external resources.

Solution Implementation

To resolve this, you need to implement a server that inspects the request URL and serves the appropriate file. A basic example can be derived from the answer, which suggests handling common file types. The server should check the file extension and set the correct Content-Type header.

Here is a rewritten code example:

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

http.createServer(function (req, res) {
    var filePath = '.' + req.url;
    if (filePath == './') {
        filePath = './index.html';
    }

    var extname = path.extname(filePath);
    var contentType = 'text/html';
    switch (extname) {
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.jpg':
        case '.jpeg':
            contentType = 'image/jpeg';
            break;
        case '.png':
            contentType = 'image/png';
            break;
        // Add more as needed
    }

    fs.readFile(filePath, function(err, content) {
        if (err) {
            if (err.code == 'ENOENT') {
                res.writeHead(404);
                res.end('File not found');
            } else {
                res.writeHead(500);
                res.end('Server error');
            }
        } else {
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content);
        }
    });
}).listen(80);

This code dynamically handles requests and serves files with appropriate MIME types.

Advanced Solution: Using Express

For a simpler approach, consider using the Express framework, as mentioned in one of the answers. Express provides middleware like express.static to serve static files effortlessly.

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(8080);

This sets up a static file server for the public directory, handling all file types automatically.

Conclusion

Building a proper static file server in Node.js requires careful handling of request paths and content types. By implementing a dynamic server or using frameworks like Express, you can ensure that all web resources are served correctly. This approach enhances performance and maintainability for web applications.