Server-Side Development with Hapi.js — Rendering Templates and HTTP Requests

Hapi.js is a small Node framework for developing back end web apps.

In this article, we’ll look at how to create back end apps with Hapi.js.

Rendering Templates

We can render Nunjucks templates in our Hapi app with the @hapi/vision plugin.

To do this, we write:

index.js

const Nunjucks = require('nunjucks');
const Hapi = require('@hapi/hapi');
const Vision = require('@hapi/vision');

const server = Hapi.Server({ port: 3000 });

const rootHandler = (request, h) => {
  return h.view('index', {
    title: request.server.version,
    message: 'Hello!'
  });
};

const init = async () => {
  await server.register(Vision);

server.views({
    engines: {
      html: {
        compile: (src, options) => {
          const template = Nunjucks.compile(src, options.environment);
          return (context) => {
            return template.render(context);
          };
        },
        prepare: (options, next) => {
          options.compileOptions.environment = Nunjucks.configure(options.path, { watch : false });
          return next();
        }
      }
    },
    relativeTo: __dirname,
    path: 'templates'
  });

server.route({ method: 'GET', path: '/', handler: rootHandler });

await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

templates/index.html

{{message}}

We require the Nunjucks module.

Then we call Nunjucks.compile to with the src parameter to compile the source to the template.

Then we return a function that calls template.render with the context to render the template.

The context has the 2nd argument of h.view as its value.

The prepare method is called before the compile method and it sets the environment option set environment-specific settings.

index.html has the template content.

@hapi/vision also supports render Twig templates.

To do this, we write:

const Twig = require('twig');
const Hapi = require('@hapi/hapi');
const Vision = require('@hapi/vision');

const server = Hapi.Server({ port: 3000 });

const rootHandler = (request, h) => {
  return h.view('index', {
    title: request.server.version,
    message: 'Hello!'
  });
};

const init = async () => {
  await server.register(Vision);

  server.views({
    engines: {
      twig: {
        compile: (src, options) => {
          const template = Twig.twig({ id: options.filename, data: src });
          return (context) => {
            return template.render(context);
          };
        }
      }
    },
    relativeTo: __dirname,
    path: 'templates'
  });

  server.route({ method: 'GET', path: '/', handler: rootHandler });

  await server.start();
  console.log('Server running at:', server.info.uri);
};

init();

templates/index.twig

{{ message }}

We set the engines.twig.compile property to a function.

In it, we call Twig.twig to set the id and data of the template.

And we return a function that takes the context parameter and call template.render on it.

context has the object that we pass in as the 2nd argument.

index.twig is our Twig template.

Making HTTP Requests

We can make HTTP requests in our Node app with the @hapi/wreck module.

For instance, we can write:

const Wreck = require('@hapi/wreck');

const makeRequest = async () => {
  const { res, payload } = await Wreck.get('http://example.com');
  console.log(payload.toString());
};

try {
  makeRequest();
}
catch (ex) {
  console.error(ex);
}

We require the @hapi/wreck module.

Then we call Wreck.get to make a GET request.

Then we get the response with the payload property.

And we convert that to a string with the toString method.

Conclusion

We can render various kinds of templates with the @hapi/vision module.

Also, we can make HTTP requests with the @hapi/wreck module in our Node app.