reactjs · timdorr · Feb 17, 2016 · Feb 5, 2016 · Feb 5, 2016 · Feb 5, 2016
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-    "presets": ["es2015", "stage-2"]
+    "presets": ["es2015", "stage-1"]
 }
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 lib
 node_modules
 coverage
+*.log
diff --git a/README.md b/README.md
diff --git a/examples/basic/README.md b/examples/basic/README.md
@@ -13,8 +13,8 @@ This example also demonstrates integration with
 
 1. Install dependencies with `npm install` in this directory (make sure it creates a local node_modules)
 2. By default, it uses the local version from `src` of react-router-redux, so you need to run `npm install` from there first. If you want to use a version straight from npm, remove the lines in `webpack.config.js` at the bottom.
-3. Build with `webpack --watch`
-4. Open `index.html`
+3. Start build with `npm start`
+4. Open [http://localhost:8080/](http://localhost:8080/)
 
 -
 

diff --git a/examples/basic/app.js b/examples/basic/app.js
@@ -4,38 +4,35 @@ import DockMonitor from 'redux-devtools-dock-monitor'
 
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
+import { createStore, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
 import { Router, Route, IndexRoute, browserHistory } from 'react-router'
-import { syncHistory, routeReducer } from 'react-router-redux'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
 
 import * as reducers from './reducers'
 import { App, Home, Foo, Bar } from './components'
 
-const middleware = syncHistory(browserHistory)
 const reducer = combineReducers({
   ...reducers,
-  routing: routeReducer
+  routing: routerReducer
 })
 
 const DevTools = createDevTools(
-  <DockMonitor toggleVisibilityKey="ctrl-h"
-               changePositionKey="ctrl-q">
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
     <LogMonitor theme="tomorrow" preserveScrollTop={false} />
   </DockMonitor>
 )
 
-const finalCreateStore = compose(
-  applyMiddleware(middleware),
+const store = createStore(
+  reducer,
   DevTools.instrument()
-)(createStore)
-const store = finalCreateStore(reducer)
-middleware.listenForReplays(store)
+)
+const history = syncHistoryWithStore(browserHistory, store)
 
 ReactDOM.render(
   <Provider store={store}>
     <div>
-      <Router history={browserHistory}>
+      <Router history={history}>
         <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="foo" component={Foo}/>

diff --git a/examples/basic/components/App.js b/examples/basic/components/App.js
@@ -1,9 +1,7 @@
 import React from 'react'
-import { Link } from 'react-router'
-import { connect } from 'react-redux'
-import { routeActions } from 'react-router-redux'
+import { Link, hashHistory } from 'react-router'
 
-function App({ push, children }) {
+export default function App({ children }) {
   return (
     <div>
       <header>
@@ -16,14 +14,9 @@ function App({ push, children }) {
         <Link to="/bar">Bar</Link>
       </header>
       <div>
-        <button onClick={() => push('/foo')}>Go to /foo</button>
+        <button onClick={() => hashHistory.push('/foo')}>Go to /foo</button>
       </div>
       <div style={{ marginTop: '1.5em' }}>{children}</div>
     </div>
   )
 }
-
-export default connect(
-  null,
-  routeActions
-)(App)
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="mount"></div>
-    <script src="dist/bundle.js"></script>
+    <script src="/bundle.js"></script>
   </body>
 </html>
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -4,29 +4,30 @@
   "repository": "reactjs/react-router-redux",
   "license": "MIT",
   "dependencies": {
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
-    "react-redux": "^4.0.0",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.3.0",
     "react-router": "^2.0.0",
-    "redux": "^3.0.4",
-    "react-router-redux": "^2.1.0"
+    "redux": "^3.2.1",
+    "react-router-redux": "^3.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.1.21",
-    "babel-eslint": "^5.0.0-beta6",
-    "babel-loader": "^6.2.0",
-    "babel-preset-es2015": "^6.1.18",
-    "babel-preset-react": "^6.1.18",
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta9",
+    "babel-loader": "^6.2.2",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
     "babel-preset-stage-1": "^6.3.13",
     "eslint": "^1.10.3",
     "eslint-config-rackt": "^1.1.1",
-    "eslint-plugin-react": "^3.15.0",
-    "redux-devtools": "^3.0.0",
+    "eslint-plugin-react": "^3.16.1",
+    "redux-devtools": "^3.1.0",
     "redux-devtools-dock-monitor": "^1.0.1",
-    "redux-devtools-log-monitor": "^1.0.1",
-    "webpack": "^1.12.6"
+    "redux-devtools-log-monitor": "^1.0.4",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
   },
   "scripts": {
-    "start": "webpack --watch"
+    "start": "webpack-dev-server --history-api-fallback --no-info --open"
   }
 }
diff --git a/examples/server/.babelrc b/examples/server/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "react", "stage-1"],
+  "plugins": [
+    ["babel-plugin-module-alias", [
+      { "src": "../../src", "expose": "react-router-redux" }
+    ]]
+  ]
+}
diff --git a/examples/server/client.js b/examples/server/client.js
@@ -0,0 +1,28 @@
+import 'babel-polyfill'
+
+import React from 'react'
+import { render } from 'react-dom'
+
+import { Provider } from 'react-redux'
+import { Router, browserHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
+
+import { configureStore, DevTools } from './store'
+import routes from './routes'
+
+const store = configureStore(browserHistory, window.__initialState__)
+const history = syncHistoryWithStore(browserHistory, store)
+
+render(
+  <Provider store={store}>
+    <Router history={history} routes={routes} />
+  </Provider>,
+  document.getElementById('root')
+)
+
+render(
+  <Provider store={store}>
+    <DevTools/>
+  </Provider>,
+  document.getElementById('devtools')
+)
diff --git a/examples/server/index.html b/examples/server/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-router-redux server rendering example</title>
+    <meta charset="utf8"/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/server/package.json b/examples/server/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "rrr-server-example",
+  "version": "0.0.0",
+  "repository": "reactjs/react-router-redux",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-redux": "^4.3.0",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^3.0.0",
+    "redux": "^3.2.1",
+    "serialize-javascript": "^1.1.2"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.5.1",
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta9",
+    "babel-loader": "^6.2.2",
+    "babel-plugin-module-alias": "^1.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-1": "^6.3.13",
+    "babel-register": "^6.5.2",
+    "eslint": "^1.10.3",
+    "eslint-config-rackt": "^1.1.1",
+    "eslint-plugin-react": "^3.16.1",
+    "express": "^4.13.4",
+    "redux-devtools": "^3.1.1",
+    "redux-devtools-dock-monitor": "^1.0.1",
+    "redux-devtools-log-monitor": "^1.0.4",
+    "webpack": "^1.12.13",
+    "webpack-dev-middleware": "^1.5.1"
+  },
+  "scripts": {
+    "start": "babel-node server.js"
+  }
+}
diff --git a/examples/server/routes.js b/examples/server/routes.js
@@ -0,0 +1,31 @@
+import React from 'react'
+import { Route, IndexRoute, Link } from 'react-router'
+
+const App = ({ children }) => (
+  <div>
+    <header>
+      Links:
+      {' '}
+      <Link to="/">Home</Link>
+      {' '}
+      <Link to="/foo">Foo</Link>
+      {' '}
+      <Link to="/bar">Bar</Link>
+    </header>
+    {children}
+  </div>
+)
+
+const Home = () => (<div>Home!</div>)
+const Foo = () => (<div>Foo!</div>)
+const Bar = () => (<div>Bar!</div>)
+
+const routes = (
+  <Route path="/" component={App}>
+    <IndexRoute component={Home}/>
+    <Route path="foo" component={Foo}/>
+    <Route path="bar" component={Bar}/>
+  </Route>
+)
+
+export default routes
diff --git a/examples/server/server.js b/examples/server/server.js
@@ -0,0 +1,62 @@
+/*eslint-disable no-console */
+import express from 'express'
+import serialize from 'serialize-javascript'
+
+import webpack from 'webpack'
+import webpackDevMiddleware from 'webpack-dev-middleware'
+import webpackConfig from './webpack.config'
+
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { Provider } from 'react-redux'
+import { createMemoryHistory, match, RouterContext } from 'react-router'
+import { syncHistoryWithStore } from '../../src'
+
+import { configureStore } from './store'
+import routes from './routes'
+
+const app = express()
+
+app.use(webpackDevMiddleware(webpack(webpackConfig), {
+  publicPath: '/__build__/',
+  stats: {
+    colors: true
+  }
+}))
+
+const HTML = ({ content, store }) => (
+  <html>
+    <body>
+      <div id="root" dangerouslySetInnerHTML={{ __html: content }}/>
+      <div id="devtools"/>
+      <script dangerouslySetInnerHTML={{ __html: `window.__initialState__=${serialize(store.getState())};` }}/>
+      <script src="/__build__/bundle.js"/>
+    </body>
+  </html>
+)
+
+app.use(function (req, res) {
+  const memoryHistory = createMemoryHistory(req.path)
+  const store = configureStore(memoryHistory)
+  const history = syncHistoryWithStore(memoryHistory, store)
+
+  match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => {
+    if (error) {
+      res.status(500).send(error.message)
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (renderProps) {
+      const content = renderToString(
+        <Provider store={store}>
+          <RouterContext {...renderProps}/>
+        </Provider>
+      )
+
+      res.send('<!doctype html>\n' + renderToString(<HTML content={content} store={store}/>))
+    }
+  })
+})
+
+app.listen(8080, function () {
+  console.log('Server listening on http://localhost:8080, Ctrl+C to stop')
+})
diff --git a/examples/server/store.js b/examples/server/store.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { createStore, combineReducers, compose, applyMiddleware } from 'redux'
+import { createDevTools } from 'redux-devtools'
+import LogMonitor from 'redux-devtools-log-monitor'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+import { routerReducer, routerMiddleware } from 'react-router-redux'
+
+export const DevTools = createDevTools(
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
+    <LogMonitor theme="tomorrow" preserveScrollTop={false} />
+  </DockMonitor>
+)
+
+export function configureStore(history, initialState) {
+  const reducer = combineReducers({
+    routing: routerReducer
+  })
+
+  let devTools = []
+  if (typeof document !== 'undefined') {
+    devTools = [ DevTools.instrument() ]
+  }
+
+  const store = createStore(
+    reducer,
+    initialState,
+    compose(
+      applyMiddleware(
+        routerMiddleware(history)
+      ),
+      ...devTools
+    )
+  )
+
+  return store
+}