@vrbo/catalyst-render NPM

@vrbo/catalyst-render

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.

@vrbo/catalyst-render v4.3.1