client side page rendering with react-router.

solution.md

Use case: client side page rendering with react-router.

Webpack config:

const fs = require('fs')
const path = require('path')

const DIRNAME = fs.realpathSync(process.cwd())
const PATHS = {
  app: path.join(DIRNAME, 'src'),
  build: path.join(DIRNAME, 'dist')
}

module.exports = {
  // Set publicPath to '/' so the bundle.js is loaded from absolute url.
  output: {
    path: path.join(DIRNAME, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // setting historyApiFallback enables refreshing from browserHistory (?)
  devServer: {
    historyApiFallback: true
  }
}

Routing:

import {
  Router, Route, Redirect, IndexRoute, browserHistory
} from 'react-router'

render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='/404' component={NotFound} />
      <Redirect from='*' to='/404' />
    </Route>
  </Router>
  ,
  document.getElementById('root')
)

This can be used only in development, not in production.