hapi-render-react

Table of Contents

• Install
• Usage
  • _document
• License

Install

yarn add hapi-render-react

npm install hapi-render-react

Usage

const { Server } = require('hapi');
const Main = require('apr-main');
const RenderReact = require('hapi-render-react');
const Path = require('path');

const { PORT = 3001 } = process.env;

const server = new Server({
  port: PORT
});

Main(async () => {
  await server.register({
    plugin: RenderReact,
    options: {
      relativeTo: Path.join(__dirname, 'views')
    }
  });

  await server.initialize();

  server.route({
    method: 'GET',
    path: '/',
    handler: {
      view: {
        name: 'home',
        dynamic: false, // true by default. if !dynamic, it generates an .html and always serves said file
        props: {
          hello: 'world'
        }
      }
    }
  });

  server.route({
    method: 'GET',
    path: '/hello',
    handler: (request, h) => {
      return h.render('hello', { name: 'world' });
    }
  });

  await server.start();

  // eslint-disable-next-line no-console
  console.log(`Server started at ${server.info.uri}`);
});

pages/home.js:

import React from 'react';

export default ({ hello }) => <p>Hello {hello}</p>;

pages/hello.js:

import React from 'react';

export default ({ name }) => <p>Hello {name}</p>;

_document

inspired by Next.js.

You can customize how a view is rendered. Example of a _document to support React-Helmet:

const React = require('react');
const { HelmetProvider } = require('react-helmet-async');
const { renderToString, renderToNodeStream } = require('react-dom/server');

module.exports = View => {
  const helmetContext = {};

  const appHtml = renderToString(
    React.createElement(
      HelmetProvider,
      { context: helmetContext },
      React.createElement(View)
    )
  );

  const { helmet } = helmetContext;

  const {
    bodyAttributes,
    htmlAttributes,
    link,
    meta,
    noscript,
    script,
    style,
    title
  } = helmet;

  const htmlAttrs = htmlAttributes.toString();
  const bodyAttrs = bodyAttributes.toString();

  const bodyHtml = renderToString(
    React.createElement(React.Fragment, null, [
      link.toComponent(),
      noscript.toComponent(),
      style.toComponent(),
      script.toComponent()
    ])
  );

  return renderToNodeStream(
    React.createElement('html', htmlAttrs, [
      React.createElement('head', null, [
        meta.toComponent(),
        title.toComponent()
      ]),
      React.createElement(
        'body',
        Object.assign(bodyAttrs, {
          dangerouslySetInnerHTML: {
            __html: appHtml + bodyHtml
          }
        })
      )
    ])
  );
};

License

BSD-3-Clause