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.
webpack.config.js
varDevTools=require('protium/devtools').defaultvardevtools=newDevTools(__dirname)// sets webpack context for your appmodule.exports=[devtools.serverConfig('./app'),// points to exported applicationdevtools.browserConfig('./client')// points to client entrypoint]app.js
importReactfrom'react'importRootfrom'./views/root'importCompfrom'./views/comp'import*asreducersfrom'./reducers'import{Application}from'protium'import{Router,Route,IndexRoute}from'protium/router'constrouter=newRouter({routes(store){// use onEnter props to validate routes based on app state// Can also return a promise here, for async route definitionreturn<Routepath="/"component={Root}><IndexRoutecomponent={Comp}/><Routepath="/a"component={Comp}/><Routepath="/b"component={Comp}/><Routepath="/c"component={Comp}/><Routepath="*"component={NotFoundComp}notFound={true}/> // signals 404 on server
</Route>}})exportdefaultnewApplication({
router,store: {
reducers
}})client.js
// client.js (short and sweet!)importappfrom'./app'app.render()// server.jsimportexpressfrom'express'importpathfrom'path'import{renderer}from'protium/server'importappfrom'./app'constserver=express()exportdefaultserverserver.use('/assets',express.static('dist'))server.get('/*',renderer(path.resolve('./app.js'),{page: {main: require('./webpack-assets.json').javascript.client}}))