A hapi view engine for React components.
By default, we render static markup. We can also choose to use
React.renderToString
, preserving the data-react-id
attributes so
re-mounting client side is possible.
$ npm install hapi-react-views
Note: Your project should have it's own react
dependency installed. We depend
on react
via peerDependencies
.
Note: As of hapi v9.x, your project must register the
vision
plugin in order for the
server.views()
method to be available.
Configuring the server manually:
var Hapi = require('hapi');
var Vision = require('vision');
var HapiReactViews = require('hapi-react-views');
var server = new Hapi.Server();
server.register(Vision, function (err) {
if (err) {
console.log("Failed to load vision.");
}
server.views({
engines: {
jsx: HapiReactViews
},
compileOptions: {}, // optional
relativeTo: __dirname,
path: 'views'
});
});
Configuring with a CLI manifest using
visionary
:
{
"servers": [{
"port": 8080
}],
"plugins": {
"vision": {},
"visionary": {
"engines": {
"jsx": "hapi-react-views"
},
"compileOptions": {},
"path": "./views"
}
}
}
Please refer to the vision
docs on
server.views(options)
for complete details.
We'll be focusing on the compileOptions
property that you can include when
passing options
to server.views
.
The following compileOptions
will customize how hapi-react-views
works.
-
compileOptions
- options object passed to the engine's compile function. Defaults to{}
.-
doctype
- a simple string prepended to the response. Defaults to<!DOCTYPE html>
-
renderMethod
- the method to invoke onReact
to generate our output. Available options arerenderToStaticMarkup
andrenderToString
. Defaults torenderToStaticMarkup
. -
removeCache
- sincenode-jsx
takes a while to startup, we can remove templates from the cache so we don't need to restart the server to see changes. Defaults to'production' !== process.env.NODE_ENV
. -
useNodeJsx
- a boolean that controls ifnode-jsx
is used. Defaults totrue
. Set tofalse
if you're using another transformer (ex:babel/require
) or don't needjsx
transformations. -
node-jsx
- options object passed tonode-jsx
'sinstall
method. Defaults toundefined
.
-
You're able to override all these compileOptions
at runtime except node-jsx
which only happens once.
var context = { name: 'Steve' };
var renderOpts = {
runtimeOptions: {
doctype: '<!DOCTYPE html>',
renderMethod: 'renderToString'
}
};
server.render('template', context, renderOpts, function (err, output) {
// ...
});
Before you can run the examples, you need to clone this repo and install the dependencies.
$ git clone git@github.com:jedireza/hapi-react-views.git
$ cd hapi-react-views
$ npm install
This example renders a simple component as HTML output. View the code.
$ npm run simple-example
This example is renders simple components as HTML but adds the idea of using layouts. View the code.
$ npm run layout-example
This example demonstrates the idea of remounting client side in order to create universal/isomorphic applications. View the code.
$ npm run remount-example
MIT
What you create with hapi-react-views
is more important than hapi-react-views
.