A Hand-Rolled Node.js Web Server for Static Files

Node's built-in http module is enough to serve a small static site. In this example, a single server.js file returns HTML, CSS, and JavaScript, and decides the content type from the first folder in the request path.

Start by pulling in the modules the server needs:

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

The server itself parses the request URL, logs the requested path, checks the first directory segment, and reads the matching file from disk. If the file is not found, it returns a 404; otherwise it sends the file back with the appropriate header. The code below uses static for CSS files and js for JavaScript files, so adjust that check if your folder layout is different.

    // Create the server
    http.createServer(function(request,response) {
      // Parse the request, including the file name
      var pathname= url.parse(request.url).pathname;
      // Output the requested file name
      console.log("Request for "+ pathname + "  received.");
    // Get the suffix to determine whether it's a js or css file; if the directory structure differs, this part needs modification
      var firstDir = pathname && pathname.split('/')[1];
      var ContentType = {'Content-Type': 'text/html'};

      // js - application/x-javascript
      if (firstDir && firstDir === 'static') {
        ContentType = {'Content-Type': 'text/css'};
      }
      if (firstDir && firstDir === 'js') {
        ContentType = {'Content-Type': 'application/x-javascript'}
      }

      // Read the requested file content from the file system
      fs.readFile(pathname.substr(1),function(err, data) {
        if(err) {
          console.log(err);
          // HTTP status code 404: NOT FOUND
          // Content Type: text/plain
          response.writeHead(404, {'Content-Type': 'text/html'});
        }
        else {
          // HTTP status code 200: OK
          // Content Type: text/plain
          response.writeHead(200, ContentType);

          // Write back the corresponding content
          response.write(data.toString());
        }
        // Send the response data
        response.end();
      });
    }).listen(8080);

    console.log('Server running at http://127.0.0.1:8080/');

On the page side, the HTML is deliberately simple: two bordered boxes, then a table, with a click event on the second box that brings in a separate JavaScript file. The CSS file holds the same rules that might otherwise sit in a style tag:

body {
border: 1px solid blue;
}

div {
    border-radius: 10px;
    width: 400px;
    height: 200px;
    border: 2px solid yellow;
}

The JavaScript file logs a confirmation and defines the click handler used by that second box:

  console.log(’-成功引入js文件-’);
  function onClickDiv () {
    alert(‘second点击事件’);
  }

To run it:

1. Download and install Node.js from the official site. This example uses the http module; other examples may use express, which would need to be installed through Node.js as well.
2. From the project directory that contains the JavaScript file, run node server.js (the file is named server here, so use your own name if it differs).
3. A successful start prints the server address and port.
4. Open http://127.0.0.1:8080/index.html in a browser to see the result.

That is the complete setup. The comments in the code cover most of the details, and the example stays intentionally small.