Node for Front-End Developers

Serving Client-Side Assets

Serving other client-side assets like CSS, images, and client-side JavaScript (of course) looks very similar to serving HTML. We’ll need to add some additional robustness to the code we’ve already built, but a few changes will allow us to provide resources to the client pretty easily. All we actually need to change is the way we set the Content-Type in our response, which means it’s necessary to modify the default header. This time, instead of changing the status code we’re returning, we’ll change that header property. We’ll cheat a little bit right now to make this more straightforward and assume that all URLs to resources will be relative to the root of our application.

The first change we’ll make is to store any directories in the requested URL, so that if our resources are organized into directories, we’ll still be able to use this same function to access them. We’ll remove the first character, since that should always be a slash, to make it easier down the line to find out whether or not the file we want is in a subdirectory:

  var filename = path.basename(req.url) || "index.html",
    ext = path.extname(filename),
    dir = path.dirname(req.url).substring(1),
    localPath = __dirname + "/public/";

The next thing we need to change is the section where we’re testing the file extension to make sure we can serve it. We could just test for a bunch of different extensions, but it’ll be easier to just create a hash of the extensions we want to support and the MIME types ...