By default, Express can and will happily render static HTML documents and serve them back to the client. However, unless you're building a purely static, content-driven site, which is doubtful, you're more than likely going to want to render your HTML dynamically. That is, you want to generate portions of HTML on the fly as pages are requested, perhaps using loops, conditional statements, data-driven content, and so on. In order to render dynamic HTML pages, you need to use a rendering engine.

This is where Handlebars comes in. The rendering engine is given its name because of the syntax it uses to display data, namely, double pairs of braces, {{ and }}. Using Handlebars, you can have sections of your HTML pages that are determined at run time based on data passed to it. Consider the following example:

<div> 
    <p>Hello there {{ name }}!  Todays date is {{ timestamp }}</p> 
</div> 

The actual HTML that would wind up on a visitor's browser would be:

<div> 
    <p>Hello there Jason!  Todays date is Sun Apr 13</p> 
</div> 

The first thing we want to take care of in our configure module is to register Handlebars as the default View rendering engine. In the configure.js file, above the return(app); line, you should insert the following code:

app.engine('handlebars', exphbs.create({ 
    defaultLayout: 'main', 
    layoutsDir: `${app.get('Views')}/layouts`, 
    partialsDir: [`${app.get('Views') }/partials`] 
}).engine); 
app.set('View engine', 'handlebars'); 

First, using the Express app object that was passed into the configure function, we define our rendering engine of choice by calling the engine function of app. The first parameter to the engine function is the file extension that the rendering engine should look for, namely, handlebars.

The second parameter builds the engine by calling the express-hbs module's create function. This create function takes an options object as a parameter, and this options object defines a number of constants for our server. Most importantly, we will define which layout is our default layout and also where our layouts will be stored. If you recall, in server.js we used app.set to set a Views property of our app that pointed to the current working directory +/Views. This setting is used when we configure the options for our rendering engine as well. You'll notice that the partialsDir property uses an array (with a single item) and a single string value for layoutsDir. Both of these methods are interchangeable, and I just wanted to demonstrate that you could have more than one partial directory, and it could just be an array of string values.

With that set, our server now knows that any time we try to render a HTML page that has a file extension of handlebars, it will use the Handlebars engine to perform the rendering. This means that we need to be sure to use Handlebars-specific syntax in our dynamic HTML pages.

We will be learning more about Handlebars and how to write dynamic HTML pages in the next chapter.