README

@vrbo/catalyst-render

Introduction
Usage
Api
Development
Further Reading

Introduction

A Hapi.js plugin that works with the catalyst-server to aid in server-side rendering using Handlebars and React. It allows you to relate a Handlebars template and a React component to a route. This route will automatically be registered with the server and will decorate request.pre.component with the react component and the request.pre.template with the template. It will also register @hapi/vision and server views with Handlebars rendering for the page scaffolding

Usage

Install:

npm install @vrbo/catalyst-render

...
"register": {
    "catalyst-render": {
        "plugin": "require:@vrbo/catalyst-render",
        "options": {
            "routes": [{
                "route": "require:./routes/application.js",
                "component": "require:../components/App/server.js",
                "template": "./templates/welcome.hbs"
            }]
        }
    }
}
...

The require:./routes/application.js points to a route file that exports a Hapi.js route object and will look something like this (with a very basic render):

module.exports = {
    method: 'GET',
    path: '/',
    options: {
        handler(request, h){
            const template = request.pre.template;
            const Component = request.pre.component;
            const body = ReactDOMServer.renderToString(<Component/>);
            return h.view(template, { body })
        },
        id: 'root'
    }
}

API

Register the plugin `server.register(server, options)`

Param	Type	Description
server	`object`	Hapi.js server
options	`object`	Overriding options
options.routes	`array`	A list of route objects to register on server.
[options.viewsOptions]	`object`	Options to add to (or override) when on `server.views` method is called for adding things like partials ,, layouts, helpers and others.
[options.visionOptions]	`object`	Proxy for options when registering @hapi/vision.
[options.resolveAssetHelper]	`object`	A Handlebars helper to help resolve static assets, as in publishing to a CDN.
options.resolveAssetHelper.name	`string`	Name of helper.
options.resolveAssetHelper.helper	`function`	Helper function.

Route

This is an object for registering routes, React components, and templates

Property	Type	Description
route	`object`	Hapi.js route object to register on server.
component	`object`	A React component to render. Available as `request.pre.component` in handler in above route.
template	`array`	A Handlebars template to use to render page scaffold. Available as `request.pre.template` in handler in above route.

Usage no npm install needed!