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
  }
}))

FAQs

What is protium?

Is protium well maintained?

Package last updated on 27 Jun 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

protium

Protium

Example

Related posts

Supply Chain Attack on Axios Pulls Malicious Dependency from npm

TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware