Using Handlebars with Hapi

This tutorial is compatible with hapi v17. Node and Hapi should be installed for work with this tutorial.

In Hapi we can use different template engines to achieve dynamic HTML with dynamic data. One of this engines – Handlebars. In this tutorial we will learn how to use handlebars with Hapi framework.

Setup the server

Let’s start our work from creating a basic server in index.js file:

Setup Vision

Hapi provides Vision plugin to work with template engines. It adds additional methods to h response object. We should install it using the NPM or YARN:

Setup Handlebars

To use Handlebars we can install it using the next command:

Server configuration

To start work with handlebars, we have to require the Handlebars and Vision module:

Now, let’s notify Hapi server, that we will use the Handlebars as a default template engine for our server. Using the server.views() method we can say to server, what template engine we have to use and where our templates should be located. Change the init()  method inside index.js to the following:

We successfully registered handlebars as a default view engine for our Hapi server and told our server that templates are in templates folder (it should be on same level as index.js).

Go to your project folder and create a templates directory. Put an index.html template file in the templates/ folder:

As you see, we created some variables in our index.html – the title and message. We will interpolate these variables inside GET /index route. Hapi framework provides two ways for rendering a view.

Rendering a view using .view()

In this case, we can use the view method of Vision module inside the h object. The first argument it’s the name of our template, the second argument – the data for interpolation in selected template.
GET /index route should look like this:

Rendering a view using view handler

In previous case, we can add additional logic/code inside handler function. If we only need to render template and nothing extra, we can change the handler from function to object and pass the view parameter. It’s called “view handler” and should look like this:

To make “view handler” works you need to install the Inert module, require and register it in index.js.

The full example

More information about View in Hapi: https://hapijs.com/tutorials/views


Learning Hapi.js? Buy my Hapi.js Handbook🔥

If you liked this, please help spread the word by hitting the recommend button below. Thanks!

Tags:,