Hapi-views-react NPM

hapi-react-views

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.

Install

$ npm install hapi-react-views

Note: Your project should have it's own react dependency installed. We depend on react via peerDependencies.

Usage

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

API

`server.views(options)`

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 on React to generate our output. Available options are renderToStaticMarkup and renderToString. Defaults to renderToStaticMarkup.
- removeCache - since node-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 if node-jsx is used. Defaults to true. Set to false if you're using another transformer (ex: babel/require) or don't need jsx transformations.
- node-jsx - options object passed to node-jsx's install method. Defaults to undefined.

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) {

    // ...
});

Please refer to vision's docs on server.render(template, context, [options], callback) for complete details.

Examples

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

Rendering a simple page

This example renders a simple component as HTML output. View the code.

$ npm run simple-example

Rendering with layouts

This example is renders simple components as HTML but adds the idea of using layouts. View the code.

$ npm run layout-example

Remounting on the client (universal/isomorphic)

This example demonstrates the idea of remounting client side in order to create universal/isomorphic applications. View the code.

$ npm run remount-example

License

MIT

Don't forget

What you create with hapi-react-views is more important than hapi-react-views.

hapi react views

hoek node-jsx

@infinitebrahmanuniverse/nolb-hapi-v @everything-registry/sub-chunk-1825

0.1.1

10 years ago

0.1.0

10 years ago