Building Isomorphic JavaScript Apps

Chapter 6. Serving Our First HTML Document

Jason Strimpel

When creating an isomorphic JavaScript framework or application, most people begin with the client and then attempt to fit their solution to the server. This is likely because they began with a client-side application and later realized that they needed some of the benefits that an isomorphic application provides, such as an optimized page load. The problem with this approach is that client implementations are typically deeply linked to the browser environment, which makes transferring the application to the server a complicated process. This is not to say that starting from the server makes us impervious to environment-specific issues, but it does ensure that we begin from a request/reply lifecycle mindset, which is required by the server. And, the real advantage we have is that we do not have an investment in an existing code base, so we get to start with a clean slate!

Serving an HTML Template

Before we build any abstractions or define an API, let’s start with serving an HTML document based on a template, so we can familiarize ourselves with the server request/reply lifecycle. For this example and the rest that follow we will be using Nunjucks by Mozilla, which you can install as follows:

$ npm install nunjucks –save

Now that we have Nunjucks installed we can create a template, src/index.html, with the contents shown in Example 6-1.

Example 6-1. Nunjucks HTML document template

<head>
  <meta charset="utf-8">
  <title> ...