protium
v0.23.0
Published
A micro framework for building universal React/Redux apps.
Downloads
30
Readme
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
}
}))