Universal rendering redux-router

client.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from 'redux-router';
import configureStore from "./configureClientStore";
import DevTools from "./DevTools";
const store = configureStore(window.__INITIAL_STATE__);

const reactRoot = window.document.getElementById("react-root");
ReactDOM.render(
	<Provider store={store}>
    	<div>
        	<ReduxRouter />
        	<DevTools />
       	</div>
    </Provider>,
    reactRoot
)
/**
 * Detect whether the server-side render has been discarded due to an invalid checksum.
 */
if (process.env.NODE_ENV !== "production") {
  if (!reactRoot.firstChild || !reactRoot.firstChild.attributes ||
      !reactRoot.firstChild.attributes["data-react-checksum"]) {
    console.error("Server-side React render was discarded. Make sure that your initial render does not contain any client-side code.");
  }
}

configureClientStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import DevTools from './DevTools';
import { reduxReactRouter } from 'redux-router';
import routes from "./routes";
import { createHistory } from 'history';

const finalCreateStore = compose(
	reduxReactRouter({
        routes,
        createHistory
    }),
	applyMiddleware(thunk),
	DevTools.instrument()
)(createStore);

export default function configureStore(initialState) {
	const store = finalCreateStore(rootReducer, initialState);

	if (module.hot) {
		module.hot.accept('../reducers', () =>
			store.replaceReducer(require('../reducers'))
		);
	}

	return store;
}

configureServerStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import DevTools from './containers/DevTools';
import { reduxReactRouter } from 'redux-router/server';
import routes from "./routes";

const finalCreateStore = compose(
	reduxReactRouter({
        routes
    }),
	applyMiddleware(thunk),
	DevTools.instrument()
)(createStore);

export default function configureStore(initialState) {
	const store = finalCreateStore(rootReducer, initialState);

	if (module.hot) {
		module.hot.accept('../reducers', () =>
			store.replaceReducer(require('../reducers'))
		);
	}

	return store;
}

reducers.js

import { combineReducers } from 'redux';
import r1 from './r1';
import r2 from './r2';
import { routerStateReducer } from 'redux-router';

const rootReducer = combineReducers({
  	r1,
  	r2,
  	router: routerStateReducer
});

export default rootReducer;

server.js

import {Server} from "hapi";
import h2o2 from "h2o2";
import inert from "inert";
import React from "react";
import ReactDOM from "react-dom/server";
import { Provider } from 'react-redux';
import { match } from 'redux-router/server';
import { ReduxRouter } from 'redux-router';
import configureStore from "./configureServerStore";
import DevTools from './containers/DevTools'

/**
 * Start Hapi server on port 8000.
 */
 const hostname = process.env.HOSTNAME || "localhost";
 const server = new Server();

 server.connection({host: hostname, port: process.env.PORT || 8000});

 server.register(
 	[
 		h2o2,
 		inert
 	],
 	(err) => {
 		if (err) {
 			throw err;
 		}

 		server.start(() => {
 			console.info("==> ✅  Server is listening");
 			console.info("==> 🌎  Go to " + server.info.uri.toLowerCase());
 		});
 	}
 );

 server.ext("onPreResponse", (request, reply) => {
 	if (typeof request.response.statusCode !== "undefined") {
 		return reply.continue();
 	}
 	const store = configureStore();
 	store.dispatch(match(request.path, (error, redirectLocation, routerState) => {
 		if (redirectLocation) {
 			reply.redirect(redirectLocation.pathname + redirectLocation.search)
 		}
 		else if (error || !routerState) {
 			console.log("ERROR")
 			reply.continue();
 		}
 		else {
 			const initialState = store.getState();
 			const reactString = ReactDOM.renderToString(
 				<Provider store={store}>
 					<div>
 						<ReduxRouter />
 						<DevTools />
 					</div>
 				</Provider>
 				);
 			const webserver = process.env.NODE_ENV === "production" ? "" : "//" + hostname + ":8080";
 			let output = (
 				`<!doctype html>
 				<html lang="en-us">
 					<head>
	 					<meta charset="utf-8">
	 					<title>Universal Redux-Router</title>
	 					<link rel="shortcut icon" href="/favicon.ico">
 					</head>
 					<body>
 						<div id="react-root">${reactString}</div>
		 				<script>
		 					window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
		 				</script>
		 				<script src=${webserver}/dist/client.js></script>
		 			</body>
 				</html>`
 				);
 			reply(output);
 		}
 	}));
});