Render hapi views
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test use latest hapi in tests Feb 23, 2017
.gitignore Initial commit Nov 17, 2014
.jshintrc initial commit Nov 17, 2014
.travis.yml fix travis file Feb 23, 2017 Release 5.0.1 Feb 23, 2017
LICENSE Initial commit Nov 17, 2014 update readme Oct 13, 2017
index.js Clear module cache on errors Feb 23, 2017
package.json Release 5.0.1 Feb 23, 2017


Consider deferring to hapi-react-views.

Build Status


A port of express-react-views to hapi

This is an hapi view engine which renders React components on server. It renders static markup and does not support mounting those views on the client.

This is intended to be used as a replacement for existing server-side view solutions, like jade, ejs, or handlebars.


npm i -S hapi-react react react-dom

Note: You must explicitly install react as a dependency. React is a peer dependency here. This is to avoid issues that may come when using incompatible versions.

Support for React 0.11.x

The 1.x.x version(s) is reserved for React 0.11.x versions. Versions 2.x.x and up will support React 0.12.x and up.


Add it to your app

server = new hapi.Server(0);
var engine = require('hapi-react')();

server.register(require('vision'), (err) => {

    defaultExtension: 'jsx',
    engines: {
      jsx: engine, // support for .jsx files
      js: engine // support for .js
    relativeTo: __dirname,
    path: 'views'


option values default
doctype any string that can be used as a doctype, this will be prepended to your document "<!DOCTYPE html>"
beautify true: beautify markup before outputting (note, this can affect rendering due to additional whitespace) false
transformViews true: use babel to apply JSX, ESNext transforms to views.
Note: if already using babel-register in your project, you should set this to false true
babel any object containing valid Babel options
Note: does not merge with defaults {presets: ['react', 'es2015']}

The defaults are sane, but just in case you want to change something, here's how it would look:

var options = { beautify: true };

  engines: {
    jsx: require('hapi-react')(options)


Under the hood, Babel is used to compile your views into ES5 friendly code, using the default Babel options. Only the files in your views directory (i.e. app.set('views', __dirname + '/views')) will be compiled.

Your views should be node modules that export a React component. Let's assume you have this file in views/index.jsx:

var React = require('react');
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {}</div>;

module.exports = HelloMessage;


Create a hapi route and serve the view.

  method: 'GET',
  path: BASE_URL,
  handler: function(request, reply) {
    reply.view('index', {
      name: 'Trevor'