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 ...
Get Node for Front-End Developers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.