Skip to content

A hapi js plugin that works with catalyst-server to provide server-side rendering with react inside a handlebars template

License

Notifications You must be signed in to change notification settings

kisaiev/catalyst-render

 
 

Repository files navigation

@vrbo/catalyst-render

NPM Version Dependency Status NPM Downloads

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 the plugin in the application's manifest:

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

Further Reading

About

A hapi js plugin that works with catalyst-server to provide server-side rendering with react inside a handlebars template

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%