Electrode React Webapp

[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![devDependency Status][daviddm-dev-image]][daviddm-dev-url] [![npm downloads][npm-downloads-image]][npm-downloads-url]

This module helps render and serve your Electrode React application's index.html. It will handle doing server side rendering and embedding all the necessary JS and CSS bundles for your application.

All the defaults are configured out of the box, but your index page is extensible. You can specify your own index template file with the htmlFile or selectTemplate options.

See design for details on how the template can be extended.

Installing

``bash
$ npm install electrode-react-webapp --save
`

Usage

$3

You can use this plugin by registering it with your Hapi server.

`js
const reactWebapp = server.register({
register: require("electrode-react-webapp"),
options: {
pageTitle: "My Awesome React WebApp",
paths: {
"/{args*}": {
content: "

Hello React!

"
}
}
}
});
`

$3

To use this with electrode-server, add to the config you pass to electrode-server:

`js
const config = {
plugins: {
"electrode-react-webapp": {
options: {
pageTitle: "My Awesome React WebApp",
paths: {
"/{args*}": {
content: "

Hello React!

"
}
},
unbundledJS: {
enterHead: [{ src: "http://cdn.com/js/lib.js" }]
}
}
}
}
};

require("electrode-server")(config);
`

Default options

This plugin has some default options but you can override them by setting your own value.

The current defaults are:

`js
{
pageTitle: "Untitled Electrode Web Application",
webpackDev: process.env.WEBPACK_DEV === "true",
renderJS: true,
serverSideRendering: true,
htmlFile: "node_modules/electrode-react-webapp/lib/index.html",
devServer: {
host: "127.0.0.1",
port: "2992"
},
paths: {},
stats: "dist/server/stats.json"
}
`

Options

| name | type | default | description |
| -------------------------------------------- | ---------------------------- | -------- | ---------------------------------------------------------- |
| pageTitle | String | | The value to be shown in the browser's title bar |
| htmlFile | String | *1 | Absolute or relative path to the HTML template. |
| selectTemplate | Function | | Callback to selecte HTML template base on request |
| serverSideRendering | Boolean | false | Toggle server side rendering. |
| webpackDev | Boolean | false | Running with webpack-dev-server |
| paths | Object | | Specify route paths and content |
| unbundledJS | Object | | Load external JavaScript into page |
| devServer | Object | | webpack Dev Server Options |
| prodBundleBase | String | "/js/" | Base path to the JavaScript, CSS and manifest bundles |
| cspNonceValue | varies | | Used to retrieve a CSP nonce value. |

> *1: Default for htmlFile is to use this module's built-in index.html

$3

Example:

`js
{
paths: {
"/test": {
// route specific options
}
}
}
`

Route speicific options can be:

| name | type | description |
| ---------------------- | ---------- | ----------------------------------------------------------------- |
| htmlFile | String | Absolute or relative path to the HTML template file. |
| templateFile | String | |
| insertTokenIds | Boolean | |
| pageTitle | String | |
| selectTemplate | Function | Callback to selecte HTML template for the route base on request |
| responseForBadStatus | Function | |
| responseForError | Function | |

| content | varies | Content generator for server-side rendering |
| overrideOptions | Object | Specify any config for the given path to override top level options |

$3

Example:

`js
{
unbundledJS: {
enterHead: [],
preBundle: []
}
}
`

- enterHead - Array of script entries to be inserted in before anything else
- preBundle - Array of script entries to be inserted in before the application's bundled JavaScript

The script entries can be:

- object - { src: "path to file" } to insert a