Render hapi views
JavaScript
Latest commit e374e96 Feb 23, 2017 @landau fix travis file
Permalink
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
CHANGELOG.md Release 5.0.1 Feb 23, 2017
LICENSE Initial commit Nov 17, 2014
README.md Release 5.0.0 Apr 18, 2016
index.js Clear module cache on errors Feb 23, 2017
package.json Release 5.0.1 Feb 23, 2017

README.md

Build Status

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

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 };

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'
    });
  }
})