Hapi route handler that makes react-router your isomorphic server side router.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
images
lib
test
.editorconfig
.eslintignore
.eslintrc
.gitattributes
.gitignore
.npmignore
CONTRIBUTING.md
README.md
index.js
package.json

README.md

Quorra

Hapi route handler that makes react-router your isomorphic server side router.

Quorra is sponsored by Pebble{code}

Example

To run the example code, first do npm install @tanepiper/quorra to install all dependencies, then run the following commands:

> npm run webpack
> npm run example

Now go to http://localhost:9000 in your browser to see an isomorphic example.

Usage

server.register([{
  register: require('@tanepiper/quorra')
}], (error) => {
  if (error) {
    throw error;
  }

  server.route({
    method: 'GET',
    path: '/{route*}',
    handler: {
      react: {
        relativeTo: `${__dirname}/app`,
        router: 'routes.js',
        layout: 'layout.jsx' || 'myLayoutMethod',
        props: {
          '/': 'myIndexMethod',
          '/about': 'myAboutMethod'
        }
      }
    }
  });
});

Options

  • relativeTo: The path to where your react-router application is located
  • router: The router file that defines your routes and components
  • layout: Either a path to a layout jsx file, or a method name that generates HTML
  • props: An object or function that returns a mapping of paths to methods that return data. This uses Hapi's in-build server.methods

Router.js might look something like:

const App = require('./../components/App.jsx');
const About = require('./../components/App.jsx');
const Goodbye = require('./../components/App.jsx');
const Hello = require('./../components/App.jsx');
const Links = require('./../components/Links.jsx');

module.exports = [{
  path: '/', component: App, indexRoute: { component: Links }
}, {
  path: '/about', component: About, indexRoute: { component: Links }
}, {
  path: '/hello', component: Hello, indexRoute: { component: Links }
}, {
  path: '/goodbye', component: Goodbye, indexRoute: { component: Links }
}];

Layout.jsx mighht look something like:

'use strict';

const React = require('react');

const Layout = React.createClass({
  displayName: 'Layout',

  render() {
    return (
      <html>
        <head>
          <title>{this.props.title || "Hapi React Handler"}</title>
        </head>
        <body>
        <div className="container" id="app-mount" dangerouslySetInnerHTML={{ __html: this.props.content }}></div>
        <script id="app-state" dangerouslySetInnerHTML={{ __html: this.props.state }}></script>
        </body>
      </html>
    );
  }
});

module.exports = Layout;