hapi-react

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.

Install

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.

Usage

Add it to your app

server = new hapi.Server(0);
var engine = require('hapi-react')();
 
server.register(require('vision'), (err) => {
  assert.ifError(err);
 
  server.views({
    defaultExtension: 'jsx',
    engines: {
      jsx: engine, // support for .jsx files
      js: engine // support for .js
    },
    relativeTo: __dirname,
    path: 'views'
  });
});

Options

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

var options = { beautify: true };
 
server.views({
  engines: {
    jsx: require('hapi-react')(options)
  }
});

Views

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 {this.props.name}</div>;
  }
});
 
module.exports = HelloMessage;

Routes

Create a hapi route and serve the view.

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