├── .env
├── shared
    ├── components
    │   ├── Root.js
    │   ├── Main.js
    │   ├── About.js
    │   ├── NotFound.js
    │   ├── HTML.js
    │   ├── TopNav.js
    │   └── Home.js
    ├── App.js
    └── routes.js
├── .babelrc
├── server
    ├── run.js
    ├── server.js
    └── api
    │   └── api1.js
├── client
    └── main.js
├── .gitignore
├── webpack.config.js
├── iso-middleware
    └── renderRoute.js
├── .eslintrc
├── package.json
└── README.md


/.env:
--------------------------------------------------------------------------------
1 | PORT='3000'
2 | NODE_ENV='development'
3 | 


--------------------------------------------------------------------------------
/shared/components/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Main from './Main';
3 | 
4 | const Root = ({ route }) => (
5 |   <Main routes={route.routes} />
6 | )
7 | 
8 | export default Root;
9 | 


--------------------------------------------------------------------------------
/shared/components/Main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderRoutes } from 'react-router-config';
 3 | 
 4 | const Main = ({ routes }) => (
 5 |   <div>
 6 |     {renderRoutes(routes)}
 7 |   </div>
 8 | );
 9 | 
10 | export default Main;
11 | 


--------------------------------------------------------------------------------
/shared/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { renderRoutes } from 'react-router-config';
 3 | import routes from './routes';
 4 | 
 5 | const App = () => (
 6 |   <div>
 7 |     {renderRoutes(routes)}
 8 |   </div>
 9 | );
10 | 
11 | export default App;
12 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "env",
 4 |     "stage-2",
 5 |     "react"
 6 |   ],
 7 |   "plugins": [
 8 |     "transform-runtime",
 9 |     "transform-es2015-destructuring",
10 |     "transform-es2015-parameters",
11 |     "transform-object-rest-spread"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/shared/components/About.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TopNav from './TopNav';
 3 | 
 4 | export default ({ route }) => (
 5 |   <div>
 6 |     <TopNav route={route} />
 7 |     <div className="ui main text container">
 8 |       <h1>About Page</h1>
 9 |     </div>
10 |   </div>
11 | );
12 | 


--------------------------------------------------------------------------------
/server/run.js:
--------------------------------------------------------------------------------
 1 | // Include Babel
 2 | // it will parse all code that comes after it.
 3 | // (Not recommended for production use).
 4 | 
 5 | process.env.NODE_ENV = 'development';
 6 | require('babel-register')({
 7 |   ignore: /\/(build|node_modules)\//,
 8 |   presets: ['env', 'react-app']
 9 | });
10 | 
11 | require('./server.js');
12 | 


--------------------------------------------------------------------------------
/client/main.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { BrowserRouter } from 'react-router-dom';
 4 | import App from '../shared/App';
 5 | 
 6 | const renderRouter = Component => {
 7 |   ReactDOM.hydrate(
 8 |     <BrowserRouter>
 9 |       <Component />
10 |     </BrowserRouter>, document.getElementById('root')
11 |   );
12 | };
13 | 
14 | renderRouter(App);
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | lib-cov
 2 | *.seed
 3 | *.log
 4 | *.csv
 5 | *.dat
 6 | *.out
 7 | *.pid
 8 | *.gz
 9 | *.swp
10 | 
11 | pids
12 | logs
13 | results
14 | tmp
15 | coverage
16 | 
17 | # Dependency directory
18 | node_modules
19 | bower_components
20 | package-lock.json
21 | 
22 | # Editors
23 | .idea
24 | *.iml
25 | 
26 | # Builds
27 | build
28 | browser.js
29 | 
30 | # OS metadata
31 | .DS_Store
32 | Thumbs.db
33 | 


--------------------------------------------------------------------------------
/shared/components/NotFound.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TopNav from './TopNav';
 3 | 
 4 | const style = {
 5 |   padding: '16px'
 6 | };
 7 | 
 8 | export default ({ route }) => (
 9 |   <div>
10 |     <TopNav route={route} />
11 |     <div className="ui main text container">
12 |       <div style={style}>
13 |         <h1>Sorry!</h1>
14 |         <p>Something went horribly wrong…</p>
15 |       </div>
16 |     </div>
17 |   </div>
18 | );
19 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'development';
 2 | const path = require('path');
 3 | 
 4 | module.exports = {
 5 |   entry: {
 6 |     main: './client/main.js'
 7 |   },
 8 |   output: {
 9 |     path: path.resolve(__dirname, 'build'),
10 |     filename: '[name].bundle.js',
11 |   },
12 |   devtool: 'inline-source-map',
13 |   module: {
14 |     rules: [
15 |       {
16 |         test: /\.(js|jsx)$/,
17 |         exclude: /node_modules/,
18 |         loader: 'babel-loader',
19 |       }
20 |     ],
21 |   },
22 |   resolve: {
23 |     extensions: ['.js', '.jsx', '.css', '.es6'],
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/shared/routes.js:
--------------------------------------------------------------------------------
 1 | import Home from './components/Home';
 2 | import About from './components/About';
 3 | import NotFound from './components/NotFound';
 4 | import Root from './components/Root';
 5 | 
 6 | const routes = [
 7 |   {
 8 |     component: Root,
 9 |     routes: [
10 |       {
11 |         path: '/',
12 |         exact: true,
13 |         component: Home
14 |       },
15 |       {
16 |         path: '/about',
17 |         component: About
18 |       },
19 |       {
20 |         path: '*',
21 |         restricted: false,
22 |         component: NotFound
23 |       }
24 |     ]
25 |   }
26 | ];
27 | 
28 | export default routes;
29 | 


--------------------------------------------------------------------------------
/shared/components/HTML.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const HTML = (props) => (
 4 |   <html lang="en">
 5 |     <head>
 6 |       <title>Isomorphic Router Demo</title>
 7 |       <link
 8 |         rel="stylesheet"
 9 |         href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"
10 |       />
11 |     </head>
12 |     <body>
13 |       <div
14 |         id="root"
15 |         dangerouslySetInnerHTML={{ __html: props.html }}
16 |       />
17 |       <script dangerouslySetInnerHTML={{
18 |           __html:
19 |             `window.__SERIALIZED_STATE__ =
20 |               JSON.stringify(${props.serverState})`
21 |         }}
22 |       />
23 |     <script type="application/javascript" src="/main.bundle.js" />
24 |     </body>
25 |   </html>
26 | );
27 | 
28 | export default HTML;
29 | 


--------------------------------------------------------------------------------
/shared/components/TopNav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | export default class TopNav extends React.Component {
 5 |   render() {
 6 |     console.log('props.route.path = '+ this.props.route.path)
 7 |     let selected = '';
 8 |     if(typeof this.props.route.path === 'string') {
 9 |       selected = this.props.route.path.split('/').pop();
10 |     }
11 |     return (
12 |       <nav>
13 |         <div className="nav-wrapper">
14 |           <a href="/" className="brand-logo">Demo</a>
15 |           <ul id="nav-mobile" className="right">
16 |             <li className={selected === '' ? 'active' : ''}>
17 |               <Link to="/">Home</Link>
18 |             </li>
19 |             <li className={selected === 'about' ? 'active' : ''}>
20 |               <Link to="/about">About</Link>
21 |             </li>
22 |             <li className={selected === 'foo' ? 'active' : ''}>
23 |               <Link to="/foo">Foo</Link>
24 |             </li>
25 |           </ul>
26 |         </div>
27 |       </nav>
28 | 
29 |     );
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | // Set up ======================================================================
 2 | // get all the tools we need
 3 | import express from 'express';
 4 | import http from 'http';
 5 | import logger from 'morgan';
 6 | import path from 'path';
 7 | import apiVersion1 from './api/api1';
 8 | import renderRouterMiddleware from '../iso-middleware/renderRoute';
 9 | 
10 | require('dotenv').config();
11 | 
12 | // Configuration ===============================================================
13 | const app = express();
14 | app.set('port', process.env.PORT || 8080);
15 | app.use(logger('short'));
16 | 
17 | // Request Handlers
18 | const buildPath = path.join(__dirname, '../', 'build');
19 | 
20 | app.use('/', express.static(buildPath));
21 | app.use('/api', apiVersion1);
22 | 
23 | app.get('*', renderRouterMiddleware);
24 | 
25 | // launch ======================================================================
26 | // Starts the Express server on port 3001 and logs that it has started
27 | http.createServer(app).listen(app.get('port'), () => {
28 |   console.log(`Express server started at: http://localhost:${app.get('port')}/`); // eslint-disable-line no-console
29 | });
30 | 
31 | module.exports = app;
32 | 


--------------------------------------------------------------------------------
/iso-middleware/renderRoute.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // import chalk from 'chalk';
 3 | import { renderToString } from 'react-dom/server';
 4 | import { StaticRouter } from 'react-router-dom';
 5 | import { matchRoutes } from 'react-router-config';
 6 | import routes from '../shared/routes';
 7 | import HTML from '../shared/components/HTML';
 8 | import App from '../shared/App';
 9 | 
10 | export default function renderRoute(req, res) {
11 |   const branch = matchRoutes(routes, req.url);
12 |   const promises = [];
13 | 
14 |   branch.forEach(({ route, match }) => {
15 |     if (route.loadData) {
16 |       promises.push(route.loadData(match));
17 |     }
18 |   });
19 | 
20 |   Promise.all(promises).then(data => {
21 |     // data will be an array[] of datas returned by each promises.
22 |     // // console.log(data)
23 | 
24 |     const context = data.reduce((context, data) => Object.assign(context, data), {});
25 | 
26 |     const router = <StaticRouter location={req.url} context={context}><App /></StaticRouter>;
27 | 
28 |     const app = renderToString(router);
29 | 
30 |     const html = renderToString(<HTML html={app} />);
31 | 
32 |     // console.log(chalk.green(`<!DOCTYPE html>${html}`));
33 | 
34 |     return res.send(`<!DOCTYPE html>${html}`);
35 |   });
36 | }
37 | 


--------------------------------------------------------------------------------
/shared/components/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import fetch from 'isomorphic-fetch';
 3 | import TopNav from './TopNav';
 4 | 
 5 | class Home extends React.Component {
 6 |   constructor(props) {
 7 |     super(props);
 8 |     this.state = {
 9 |       resHello: 'Loading...',
10 |       resQuote: 'Loading...'
11 |     };
12 |   }
13 |   componentWillMount() {
14 |     // Get hello message
15 |     this.callApi('http://localhost:3000/api/hello')
16 |       .then(res => this.setState({ resHello: res.express }))
17 |       .catch(err => console.log(err));
18 | 
19 |     // Get random quote
20 |     const rand = Math.random();
21 |     this.callApi(`http://localhost:3000/api/quote/${rand}`)
22 |       .then(res => this.setState({ resQuote: res.express }))
23 |       .catch(err => console.log(err));
24 |   }
25 |   callApi = async function (endpoint) {
26 |     const response = await fetch(endpoint);
27 |     const body = await response.json();
28 | 
29 |     if (response.status !== 200) throw Error(body.message);
30 | 
31 |     return body;
32 |   }
33 | 
34 |   render() {
35 |     console.log('rendering: Home');
36 |     return (
37 |       <div>
38 |         <TopNav route={this.props.route} />
39 |         <div className="container">
40 |           <h1>Home page</h1>
41 |           <h6>
42 |             {`Message from the server: ${this.state.resHello}`}
43 |           </h6>
44 |           <h5>Random Quote</h5>
45 |           <blockquote>
46 |             {this.state.resQuote}
47 |           </blockquote>
48 |         </div>
49 |       </div>
50 |     );
51 |   }
52 | }
53 | 
54 | export default Home;
55 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb",
 3 |   "parser": "babel-eslint",
 4 |   "env": {
 5 |     "browser": true,
 6 |     "node": true,
 7 |     "es6": true,
 8 |     "mocha": true
 9 |   },
10 |   "rules": {
11 |     "valid-jsdoc": ["error", {
12 |       "requireReturn": true,
13 |       "requireReturnType": true,
14 |       "requireParamDescription": true,
15 |       "requireReturnDescription": true
16 |     }],
17 |     "comma-dangle": ["error", "never"],
18 |     "prefer-destructuring": ["error", {"object": false, "array": false}],
19 |     "global-require": 0, // Used by React Native.
20 |     "func-names": ["error", "never"],
21 |     "function-paren-newline": ["error", "consistent"],
22 |     "new-cap": [2, {"capIsNew": false, "newIsCap": true}], // For immutable Record() etc.
23 |     "no-class-assign": 0, // Class assign is used for higher order components.
24 |     "no-nested-ternary": 0, // It's nice for JSX.
25 |     "no-param-reassign": 0, // We love param reassignment. Naming is hard.
26 |     "no-shadow": 0, // Shadowing is a nice language feature. Naming is hard.
27 |     "import/imports-first": 0, // Este sorts by atom/sort-lines natural order.
28 |     "react/jsx-filename-extension": 0, // No, JSX belongs to .js files
29 |     "jsx-a11y/html-has-lang": 0, // Can't recognize the Helmet.
30 |     "no-confusing-arrow": 0, // This rule is super confusing.
31 |     "react/forbid-prop-types": 0, // Este is going to use Flow types.
32 |     "react/no-unused-prop-types": 0, // Este is going to use Flow types.
33 |     "class-methods-use-this": 0, // Good idea, but ignores React render.
34 |     "arrow-parens": 0, // Not really.
35 |     "require-jsdoc": ["error", {
36 |         "require": {
37 |             "FunctionDeclaration": false,
38 |             "MethodDefinition": false,
39 |             "ClassDeclaration": false
40 |         }
41 |     }]
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/server/api/api1.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | 
 3 | const api = express.Router();
 4 | 
 5 | const quotes = [
 6 |   'The right to do something does not mean that doing it is right. ~ William Safire',
 7 |   'It is the mark of an educated mind to be able to entertain a thought without accepting it. ~ Aristotle',
 8 |   'Education is not the filing of a pail, but the lighting of a fire. ~ William Butler Yeats',
 9 |   'You have to dream before your dream can come true. ~ Abdul Kalam',
10 |   'All life is an experiment. The more experiements you make the better. ~ Ralph Waldo Emerson',
11 |   'All the art of living lies in a fine mingling of letting go and holding on. ~ Henry Ellis',
12 |   'The price of anything is the amount of life you exchange for it. ~ Henry David Thoreau',
13 |   'Discipline is the bridge betwenn goal and accomplishment. ~ John Rohn',
14 |   'Life is the sum of your choices. ~ Albert Camus',
15 |   'Not life, but good ilfe, is to be chiefly valued. ~ Socrates',
16 |   'It is not in the stars to hold our destiny but in ourselves. ~ William Shakespeare',
17 |   'Experience is not what happens to you; It is what you do with what happens to you. ~ Aldous Huxley',
18 |   'Failure is only the opportunity to begin again, only this time more wisely.” ~ Henry Ford'
19 | ];
20 | 
21 | // a random index between 0 and quotes.length
22 | const randomInd = (rand) =>  Math.floor(rand * quotes.length);
23 | 
24 | api.get('/hello', (req, res) => {
25 |   res.send({ express: `You can choose from ${quotes.length} quotes` });
26 | });
27 | 
28 | 
29 | api.get('/quote/:rand', (req, res) => {
30 |   const rand = parseFloat(req.params.rand);
31 |   if (Number.isNaN(rand)) {
32 |     res.send({ express: 'Bad request.' });
33 |     return;
34 |   }
35 |   const randomQuote = quotes[randomInd(rand)];
36 | 
37 |   res.send({ express: `${randomQuote}` });
38 | });
39 | 
40 | module.exports = api;
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "isomorphic-router-demo",
 3 |   "private": true,
 4 |   "version": "1.0.0",
 5 |   "author": "xiaoyunyang",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "build:prod": "./node_modules/.bin/webpack --mode production",
 9 |     "build:dev": "./node_modules/.bin/webpack --mode development",
10 |     "prestart": "npm run build:dev",
11 |     "start": "node server/run.js",
12 |     "lint": "./node_modules/.bin/eslint server client shared iso-middleware --ext .js,.jsx --fix"
13 |   },
14 |   "dependencies": {
15 |     "babel-polyfill": "^6.26.0",
16 |     "chalk": "^2.4.1",
17 |     "dotenv": "^5.0.0",
18 |     "express": "^4.16.4",
19 |     "fs": "0.0.1-security",
20 |     "isomorphic-fetch": "^2.2.1",
21 |     "morgan": "^1.9.1",
22 |     "react": "^16.6.3",
23 |     "react-dom": "^16.6.3",
24 |     "react-router-config": "^1.0.0-beta.4",
25 |     "react-router-dom": "^4.3.1"
26 |   },
27 |   "devDependencies": {
28 |     "babel-cli": "^6.26.0",
29 |     "babel-core": "^6.26.3",
30 |     "babel-eslint": "^8.2.6",
31 |     "babel-loader": "^7.1.5",
32 |     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
33 |     "babel-plugin-transform-es2015-parameters": "^6.24.1",
34 |     "babel-plugin-transform-object-rest-spread": "^6.26.0",
35 |     "babel-plugin-transform-runtime": "^6.23.0",
36 |     "babel-preset-env": "^1.7.0",
37 |     "babel-preset-react": "^6.24.1",
38 |     "babel-preset-react-app": "^3.1.2",
39 |     "babel-preset-stage-2": "^6.24.1",
40 |     "babel-register": "^6.26.0",
41 |     "eslint": "^4.19.1",
42 |     "eslint-config-airbnb": "^16.1.0",
43 |     "eslint-config-google": "^0.9.1",
44 |     "eslint-plugin-babel": "^4.1.2",
45 |     "eslint-plugin-import": "^2.14.0",
46 |     "eslint-plugin-jsx-a11y": "^6.1.2",
47 |     "eslint-plugin-react": "^7.11.1",
48 |     "eslint-plugin-react-native": "^3.5.0",
49 |     "style-loader": "^0.20.3",
50 |     "webpack": "^4.26.1",
51 |     "webpack-cli": "^3.1.2"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # isomorphic-router-demo
 2 | 
 3 | 
 4 | To try out the app:
 5 | 
 6 | ```
 7 | $ git clone https://github.com/xiaoyunyang/isomorphic-router-demo.git
 8 | $ cd isomorphic-router-demo
 9 | $ npm install
10 | $ npm start
11 | ```
12 | 
13 | Go to [http://localhost:3000](http://localhost:3000) to get the code up and running
14 | 
15 | To learn more about this repo and what an isomorphic app: [https://hackernoon.com/get-an-isomorphic-web-app-up-and-running-in-5-minutes-72da028c15dd](https://hackernoon.com/get-an-isomorphic-web-app-up-and-running-in-5-minutes-72da028c15dd)  
16 | 
17 | ## Motivation
18 | 
19 | This is a demo project to show you how to set up an isomorphic webapp using [React Router 4](https://github.com/ReactTraining/react-router) and [`react-router-config`](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config).
20 | 
21 | The app has a few pages:
22 | 
23 | 1. The Home page, which includes two sets of dynamic loading to server APIs to grab JSON data to be displayed on the page. This is achieved via isomorphic-fetch. One isomorphic-fetch returns the same JSON data every time and the other one returns a different JSON each time.
24 | 2. The About page
25 | 3. The NotFound page, which gets rendered anytime an unrecognized route is requested.
26 | 
27 | ## App Building Blocks
28 | 
29 | ```
30 | ├── build
31 | |  └── main.bundle.js   <=== A2
32 | ├── client
33 | |  └── main.js   <=== B2
34 | ├── iso-middleware
35 | |  └── renderRoute.js  <=== A4
36 | ├── package.json
37 | ├── .babelrc
38 | ├── .env
39 | ├── server
40 | |  ├── run.js
41 | |  └── server.js  <=== A5
42 | ├── shared
43 | |  ├── App.js   <=== B3
44 | |  ├── components
45 | |  |  ├── About.js
46 | |  |  ├── HTML.js   <=== A3
47 | |  |  ├── TopNav.js   <=== B4
48 | |  |  ├── Home.js
49 | |  |  ├── Main.js   <=== B5
50 | |  |  └── NotFound.js
51 | |  └── routes.js <=== B6
52 | └── webpack.config.js <=== A1, B1
53 | ```
54 | 
55 | Notes:
56 | 
57 | * Server Render: **A**  
58 | 	* A1. `webpack.config.js` creates `/build/main.bundle.js` when the app is first built.
59 | 	* A2. `main.bundle.js` is used in `HTML.js`
60 | 	* A3. `HTML.js` is a React component used to generate the template HTML that the server sends to the browser when it gets an HTTP `GET` request from the browser (called the initial load).
61 | 	* A4. `renderRoute.js` renders a static version of the `App` (using the `StaticRouter` as a container) into the HTML template in `HTML.js`, converts everything to string using React's server rendering support, then send the final string version of the HTML to send for HTTP GET request.
62 | 	* A5. `server.js` responds to the initial load request by getting `renderRoutes` to respond with an HTML.
63 | 
64 | * Client Render: **B**
65 | 	* B1. `webpack.config.js` identifies the entry point for the client app as `main.js`
66 | 	* B2. `main.js` renders a SPA version of the app using `BrowserRouter` as container for `App`.
67 | 	* B3. `App` includes a `TopNav` and a `Main`.
68 | 	* B4. `TopNav` contains React Router `Link` components, which navigates to the route upon click.
69 | 	* B5. `Main` contains a React Router `Switch` component, which switches between the `Home`, `About`, and `NotFound` components depending on the route.
70 | 	* B6. `routes.js` determines the mapping between routes and the `Home`, `About`, and `NotFound` components.
71 | 
72 | 
73 | ## Isomorphic Webapp Concepts
74 | 
75 | * **Initial Load**:  The HTML that server gets an initial request via a HTTP GET request. The server grabs what it needs to render the HTML, such as data from a database or static assets like images, then sends HTML to the browser.
76 | * **SPA mode**: After initial load, the page should immediately enters Single Page Application (SPA) mode. In SPA mode:
77 | 	* The app can support quick navigation between pages without refreshing the page, and if done right, can even work offline.
78 | 	* Updates are initiated by events, such as mouse clicks or scroll from the user.
79 | 	* Additional data can by grabbed by talking to an API. The server serves up data, usually as JSON, to an api endpoint (RESTful API or GraphQL).
80 | 
81 | ## Resources
82 | Here are some repos and tutorials that helped me figure out how to set up the project:
83 | 
84 | * [technology-ebay-de/universal-react-router4](https://github.com/technology-ebay-de/universal-react-router4/tree/master/src/shared)
85 | * [zacfukuda/universal-app-react-router](https://github.com/zacfukuda/universal-app-react-router)
86 | * [React Router training on server rendering](https://reacttraining.com/react-router/web/guides/server-rendering)
87 | * [isomorphic-dev-js](https://github.com/isomorphic-dev-js/complete-isomorphic-example)
88 | * [EmileCantin's blog](https://blog.emilecantin.com/web/react/javascript/2017/05/16/ssr-react-router-4-webpack-code-split.html)
89 | * Elyse Kolker Gordon's Slides: [SlideShare](https://www.slideshare.net/ElyseKolkerGordon/building-universal-web-apps-with-react-72715124) / [GoogleDoc](https://docs.google.com/presentation/d/1zxF2wvvOxctqqt78ho5D2lCKkU8R2X0wcY_O8TIbVGA/pub?start=false&loop=false&delayms=10000)
90 | * [Going Isomorphic With React](https://bensmithett.github.io/going-isomorphic-with-react/#/) Presentation
91 | 
92 | ## TODOs
93 | 
94 | - [X] Add `isomorphic-fetch` example to show app grabbing data from an api endpoint while in SPA mode.
95 | - [ ] Add example for redirect with message to the router
96 | - [ ] Add webpack HMR and React Hot Loader
97 | - [ ] Add data preloading example
98 | - [ ] Add redux example
99 | 


--------------------------------------------------------------------------------