routing and ssr, handling redirects too

Author: turbobeast

package.json

@@ -23,20 +23,30 @@
     "style-loader": "^0.14.1",
     "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.4.2",
+    "webpack-manifest-plugin": "^1.1.0"
   },
   "scripts": {
-    "lint": "eslint --fix src/",
     "build": "rimraf build/ && webpack -p",
-    "start": "webpack-dev-server --config webpack.config.dev.js"
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
+    "lint": "eslint --fix src/ server.js",
+    "start": "node server"
   },
   "dependencies": {
     "babel-core": "^6.24.0",
     "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.24.0",
+    "express": "^4.15.2",
+    "ignore-styles": "^5.0.1",
+    "isomorphic-fetch": "^2.2.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-hot-loader": "3.0.0-beta.6",
     "react-redux": "^5.0.3",
+    "react-router": "next",
+    "react-router-dom": "next",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0"
   }

server.js

@@ -0,0 +1,83 @@
+require('babel-register')({
+  extensions: ['.js'],
+  presets: ['es2015'],
+})
+require('ignore-styles')
+const express = require('express')
+const { createElement } = require('react')
+const { StaticRouter } = require('react-router')
+const { Provider } = require('react-redux')
+const { renderToString } = require('react-dom/server')
+
+const { htmlTemplate } = require('./src/index.html.js')
+const manifest = require('./build/manifest.json')
+const App = require('./src/components/app/app').default
+const storeFactory = require('./src/store').default
+
+const app = express()
+const htmlCache = {}
+
+function makeCacheObject (html, expires = 3600000) {
+  return {
+    html,
+    expires,
+    createdAt: Date.now(),
+  }
+}
+
+function isFresh (cacheObj) {
+  return (Date.now() - cacheObj.createdAt) < cacheObj.expires
+}
+
+function bootstrapApp(location, store) {
+  const context = {}
+  const appEntry = createElement(
+    Provider, { store }, createElement(
+      StaticRouter, { location, context }, createElement(
+        App)))
+
+  const appHTML = renderToString(appEntry)
+  return { appHTML, context }
+}
+
+function checkCache(request, response, next) {
+  if (htmlCache[request.url] && isFresh(htmlCache[request.url])) {
+    response.send(htmlCache[request.url].html)
+    return
+  }
+
+  next()
+}
+
+function handleSSRRequest (request, response) {
+  const store = storeFactory()
+  const unsubscribe = store.subscribe(() => {
+    const state = store.getState()
+    if (!state.robotData.isPending) {
+      unsubscribe()
+      const { appHTML } = bootstrapApp(request.url, store)
+      const htmlResponse = htmlTemplate({
+        jsPath: manifest['main.js'],
+        cssPath: manifest['main.css'],
+        appHTML,
+        state,
+      })
+      response.send(htmlResponse)
+      htmlCache[request.url] = makeCacheObject(htmlResponse)
+    }
+  })
+
+  const { context } = bootstrapApp(request.url, store)
+  if (context.url) {
+    response.redirect(context.url)
+    unsubscribe()
+    return
+  }
+  store.dispatch({ type: 'INIT_SSR' })
+}
+
+app.use('/static', express.static('./build/static'))
+app.use(checkCache)
+app.use(handleSSRRequest)
+
+app.listen(8080)

src/actions/index.js

@@ -1,3 +1,4 @@
+import 'isomorphic-fetch'
 import {
   SET_SEARCH_TERM,
   GET_ROBOTS_IS_PENDING,
@@ -11,7 +12,11 @@ export const setSearchTerm = term => ({
 })
 
 
-export const getRobots = () => (dispatch) => {
+export const getRobots = () => (dispatch, getState) => {
+  const state = getState()
+  if (state.robotData.robots.length >= 10) {
+    return
+  }
   dispatch({ type: GET_ROBOTS_IS_PENDING })
 
   fetch('https://jsonplaceholder.typicode.com/users')

src/components/app/app.js

@@ -1,14 +1,18 @@
 import React from 'react'
+import { Route, Switch, Redirect } from 'react-router-dom'
 import './app.css'
-// import RobotFilterViewContainer from '../../containers/robot-filter-view.container'
+import RobotFilterViewContainer from '../../containers/robot-filter-view.container'
 import RobotProfileViewContainer from '../../containers/robot-profile-view.container'
 
 function App() {
   return (
     <div className="tc">
       <h1>RoboDex</h1>
-      {/* <RobotFilterViewContainer /> */}
-      <RobotProfileViewContainer />
+      <Switch>
+        <Route path="/" exact component={RobotFilterViewContainer} />
+        <Route path="/profile/:id" component={RobotProfileViewContainer} />
+        <Redirect to={{ pathname: '/' }} />
+      </Switch>
     </div>
   )
 }

src/components/card.js

@@ -1,13 +1,16 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 const Card = ({ id, name, email }) => (
-  <div className="grow bg-light-green br3 pa3 ma2 dib">
-    <img alt={name} src={`//robohash.org/${id}?size=200x200`} />
-    <div>
-      <h2>{name}</h2>
-      <p>{email}</p>
+  <Link to={`/profile/${id}`}>
+    <div className="grow bg-light-green br3 pa3 ma2 dib">
+      <img alt={name} src={`//robohash.org/${id}?size=200x200`} />
+      <div>
+        <h2>{name}</h2>
+        <p>{email}</p>
+      </div>
     </div>
-  </div>
+  </Link>
   )
 
 Card.propTypes = {

src/components/profile/profile-view.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import Profile from './profile'
 import './profile.css'
 
@@ -16,6 +17,7 @@ class ProfileView extends Component {
           ? <Profile robot={robot} />
           : <h2>Loading... </h2>
         }
+        <Link className="button" to="/">Back</Link>
       </div>
     )
   }

src/containers/robot-profile-view.container.js

@@ -3,7 +3,7 @@ import { getRobots } from '../actions'
 import ProfileView from '../components/profile/profile-view'
 
 const mapStateToProps = (state, ownProps) => {
-  const id = ownProps.id || 1
+  const id = parseInt(ownProps.match.params.id, 10) || 1
   const isPending = state.robotData.isPending
   let robot = null
 

src/index.dev.js

@@ -2,15 +2,17 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { AppContainer } from 'react-hot-loader'
-
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './components/app/app'
-import store from './store'
+import storeFactory from './store'
 
 const render = (Component) => {
   ReactDOM.render(
     <AppContainer>
-      <Provider store={store}>
-        <Component />
+      <Provider store={storeFactory()}>
+        <Router>
+          <Component />
+        </Router>
       </Provider>
     </AppContainer>,
     document.getElementById('root'),

src/index.html.js

@@ -0,0 +1,17 @@
+module.exports.htmlTemplate = ({ cssPath, jsPath, appHTML, state }) => `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
+  <link rel="stylesheet" href="${cssPath}">
+  <title>react app</title>
+</head>
+<body>
+  <div id="root">${appHTML}</div>
+  <script>
+    window.INITIAL_STATE = ${JSON.stringify(state).replace(/</g, '\\u003c')}
+  </script>
+  <script src="${jsPath}"></script>
+</body>
+</html>`

src/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
+import { BrowserRouter as Router } from 'react-router-dom'
 import App from './components/app/app'
-import store from './store'
+import storeFactory from './store'
 
 ReactDOM.render(
-  <Provider store={store}>
-    <App />
+  <Provider store={storeFactory()}>
+    <Router>
+      <App />
+    </Router>
   </Provider>,
-  document.getElementById('root'),
-)
+  document.getElementById('root'))