Protium NPM | npm.io

Protium

Protium is a micro framework for building universal React/Redux apps.

Bundles react, react-router, and redux into a nice little package, takes care of routing and store/reducer setup for you (more examples forthcoming).

Uses react-helmet for <head> management.

import {Helmet} from 'protium', and include that component within any of your views.

Example

webpack.config.js

var DevTools = require('protium/devtools').default

var devtools = new DevTools(__dirname) // sets webpack context for your app

module.exports = [
  devtools.serverConfig('./app'), // points to exported application
  devtools.browserConfig('./client')  // points to client entrypoint
]

app.js

import React from 'react'
import Root  from './views/root'
import Comp  from './views/comp'
import * as reducers from './reducers'
import { Application } from 'protium'
import {
  Router,
  Route,
  IndexRoute
} from 'protium/router'

const router = new Router({
  routes(store) { // use onEnter props to validate routes based on app state
    // Can also return a promise here, for async route definition
    return <Route path="/" component={Root}>
      <IndexRoute component={Comp} />
      <Route path="/a" component={Comp} />
      <Route path="/b" component={Comp} />
      <Route path="/c" component={Comp} />
      <Route path="*" component={NotFoundComp} notFound={true} /> // signals 404 on server
    </Route>
  }
})

export default new Application({
  router,
  store: {
    reducers
  }
})

client.js

// client.js (short and sweet!)
import app from './app'

app.render()

// server.js
import express       from 'express'
import path          from 'path'
import { renderer }  from 'protium/server'
import app           from './app'

const server = express()
export default server

server.use('/assets', express.static('dist'))
server.get('/*', renderer(path.resolve('./app.js'), {
  page: {
    main: require('./webpack-assets.json').javascript.client
  }
}))