Handlebars can be installed via npm as follows:
npm install hbs --save
Once Handlebars has been installed, all we need to do is add three lines to our application source file (app.ts), as follows:
import express from 'express';
let app = express();
import * as Index from './routes/Index';
import * as Login from './routes/Login';
import * as path from 'path';
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use('/', Index.router);
app.use('/', Login.router);
Here, we have added an import for the module named 'path'. The path module allows us to use several handy functions when working with directory pathnames. One of the variables exposed by the path module is the __dirname variable, which holds the full pathname of the current directory. We are using this __dirname variable in a call to the path.join function, which will return the full pathname to the local views directory. We are then setting the 'views' global Express parameter to this directory. Handlebars will, by default, use this global parameter to find the path where template files are stored.
Our last change to our app.ts file is to call app.set with the argument 'view engine', and the value 'hbs'. This function call indicates to Express that it should use Handlebars as the template engine. These are the only changes we need to make to our Express application.
Now that we have registered a template library, we can update our routes/Index.ts router to use a Handlebars template, as follows:
import express from 'express';
var router = express.Router();
router.get('/', (req: express.Request, res: express.Response) => {
res.render('index',
{
title: 'Express'
}
);
});
export { router } ;
Here, we have updated the route handler function to call res.render instead of res.send, as was used previously. This res.render function takes the name of the template as its first parameter, and then uses a POJO to use as input to the template engine.
If we run our web application at this stage, we will generate an error indicating that Handlebars cannot find the view named "index", as follows:
Error: Failed to lookup view "index" in views directory "/express_samples/views" at EventEmitter.render (//express_samples/node_modules/express/lib/application.js:579:17) at ServerResponse.render (//express_samples/node_modules/express/lib/response.js:960:7) at //express_samples/routes/Index.js:7:9 at Layer.handle [as handle_request]
We will now need to create an index view template. This template must exist in the views sub directory, and as such will be named views/index.hbs. Handlebars uses the .hbs extension to specify Handlebars template files. This file is as simple as the following:
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>
Our index.hbs template file contains an <h1> element and a <p> element. Both of these elements use the {{title}} argument passed into the view template for parameter substitution.
Our rendered HTML page is now starting to look like the real thing. However, we still need the <doctype>, <head>, and <body> tags to be rendered in order for this to be valid HTML. Handlebars, similar to other rendering engines, allows us to specify a base layout template that will be used as the base layout for all pages. This is by default named layout.hbs, as follows:
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
{{{body}}}
</body>
</html>
Here, we have defined the basic layout template to be used for each view. Handlebars will create HTML pages starting with this template, and then substitute any specific view template within the {{{body}}} tag. This base template has included a style sheet in the <link> tag in our <head> element, as we would expect in a standard HTML page. Note how the <title> element uses the {{title}} substitution parameter. Our login request handler renders this page with an object that includes a title property. Handlebars will therefore use this object to replace the {{title}} parameter with the passed-in object value. Our resulting page is as follows:
And our source HTML for this page is as follows:
