hot reload + api / production on 3000 to match CRA

Author: kdmcclel

README.md

@@ -7,13 +7,18 @@ Install
 -------
 ```bash
 npm install
-npm run build
-npm run start:server
 ```
 
 ### Development
-This just runs create react app, its great!
+This runs the creat react app with hot reloading containers + reducers
 ```bash
 npm start
 ```
 
+### Production
+-------
+```bash
+npm run build
+npm run now-start
+```
+

package.json

@@ -2,8 +2,10 @@
   "name": "ssr-create-react-app-v2",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:3001/",
   "devDependencies": {
     "babel-cli": "^6.24.1",
+    "concurrently": "^3.4.0",
     "react-scripts": "0.8.5"
   },
   "dependencies": {
@@ -16,12 +18,14 @@
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
     "react-router-dom": "^4.1.1",
-    "redux": "^3.6.0"
+    "redux": "^3.6.0",
+    "redux-saga": "^0.15.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "./node_modules/.bin/concurrently \"npm run start:server\" \"npm run start:client\"",
+    "start:client": "react-scripts start",
     "start:server": "NODE_ENV=development node server/index.js",
-    "now-start": "NODE_ENV=production node server/index.js",
+    "now-start": "NODE_ENV=production PORT=3000 node server/index.js",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

server/routes/api.js

@@ -10,5 +10,14 @@ router.get('/', function(req, res, next) {
   res.json({})
 })
 
+const users = {
+  1: { email: '[email protected]' }
+}
+router.get('/users/:id', function(req, res, next) {
+  if(Object.keys(users).indexOf(req.params.id) > -1) {
+    res.json(users[req.params.id])
+  } else {
+    res.status(404).json({})
+  }
+})
 module.exports = router
-

src/actions/user.js

@@ -1,4 +1,11 @@
-import { SET, RESET } from '../types/user'
+import { REQUEST, SET, RESET } from '../types/user'
+
+export function request(id) {
+  return {
+    type: REQUEST,
+    id
+  }
+}
 
 export function set(payload){
   return {
@@ -12,4 +19,3 @@ export function reset(){
     type: RESET
   }
 }
-

src/api.js

@@ -7,8 +7,9 @@ class Api {
     if (!options){
       return
     }
-    const {token} = options
+    const {token, prefix} = options
     this.token = token
+    this.prefix = prefix
   }
   getJsonHeaders(){
     return {
@@ -34,11 +35,51 @@ class Api {
   _buildQueryString(data){
     return '?' + Object.keys(data).map(d=>d+'='+encodeURIComponent(data[d]))
   }
+  parseJson(res) {
+    return res.json()
+  }
+  checkStatus(res) {
+    if (res.status >= 200 && res.status < 300) {
+      return res
+    } else {
+      var error = new Error(res.statusText)
+      error.response = res
+      throw error
+    }
+  }
+  get(fixture, id) {
+    if(id) {
+      return fetch(`${this.apiUrl}${this.prefix}/${fixture}/${id}`, this.getJsonHeaders())
+        .then(this.checkStatus)
+        .then(this.parseJson)
+        .then(data => {
+          return {ok: true, data}
+        }).catch(err => {
+          return {ok: false, err}
+        })
+    } else {
+      return fetch(`${this.apiUrl}${this.prefix}/${fixture}`, this.getJsonHeaders())
+        .then(this.checkStatus)
+        .then(this.parseJson)
+        .then(data => {
+          return {ok: true, data}
+        }).catch(err => {
+          return {ok: false, err}
+        })
+    }
+  }
 }
 
-export class MainApi extends Api{
-  constructor(options){
-    super(options)
-    this.prefix = '/api'
+const create = (prefix = '/api') => {
+  const api = new Api({prefix})
+
+  const getUser = (id) => api.get('users', id)
+
+  return {
+    getUser
   }
 }
+
+export default {
+  create
+}

src/config.js

@@ -1,4 +1,4 @@
-let apiUrl = 'http://localhost:3001'
+let apiUrl = 'http://localhost:3000'
 if (process.env.NODE_ENV === 'production') {
   apiUrl = ''
 }

src/containers/SecondPage.js

@@ -7,6 +7,9 @@ import { Link } from 'react-router-dom'
 import './SecondPage.css'
 
 class SecondPage extends Component {
+  componentDidMount() {
+    this.props.userActions.request(1)
+  }
   render() {
     return (
       <div className='bold'>

src/index.js

@@ -11,13 +11,22 @@ import App from './containers/App'
 const initialState = {}
 const store = configureStore(initialState)
 
-ReactDOM.render(
-  <Provider store={store}>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </Provider>
-, document.getElementById('root')
-)
+const render = (Component) => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <Component />
+      </BrowserRouter>
+    </Provider>,
+    document.getElementById('root')
+  )
+}
 
+render(App)
 
+if(process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept('./containers/App', () => {
+    const NewApp = require('./containers/App').default
+    render(NewApp)
+  })
+}

src/sagas/index.js

@@ -0,0 +1,11 @@
+import { fork } from 'redux-saga/effects'
+import userSaga from './user'
+import API from '../api'
+
+const api = API.create()
+
+export default function * rootSaga() {
+  yield [
+    fork(userSaga(api))
+  ]
+}

src/sagas/user.js

@@ -0,0 +1,27 @@
+import * as userActions from '../actions/user'
+import * as userTypes from '../types/user'
+import { call, put, takeLatest } from 'redux-saga/effects'
+
+function * getUser(api, {id}) {
+  if(!id) {
+    yield put(userActions.reset())
+  } else {
+    const response = yield call(api.getUser, id)
+
+    if(response.ok) {
+      yield put(userActions.set(response.data))
+    } else {
+      yield put(userActions.reset())
+    }
+  }
+}
+
+const userSaga = (api) => {
+  return function * () {
+    yield [
+      takeLatest(userTypes.REQUEST, getUser, api)
+    ]
+  }
+}
+
+export default userSaga

src/store.js

@@ -1,15 +1,16 @@
 import { createStore, applyMiddleware, compose } from 'redux'
 import reducers from './reducers'
+import rootSaga from './sagas'
 //import createLogger from 'redux-logger'
-//import createSagaMiddleware from 'redux-saga'
+import createSagaMiddleware from 'redux-saga'
 
 //const logger = createLogger()
-//const sagaMiddleware = createSagaMiddleware()
+const sagaMiddleware = createSagaMiddleware()
 
 export default function configureStore(initialState = {}) {
   // Create the store with two middlewares
   const middlewares = [
-  //  sagaMiddleware
+    sagaMiddleware
   //, logger
   ]
 
@@ -24,8 +25,14 @@ export default function configureStore(initialState = {}) {
   )
 
   // Extensions
-  //store.runSaga = sagaMiddleware.run
+  sagaMiddleware.run(rootSaga)
   store.asyncReducers = {} // Async reducer registry
 
+  if(process.env.NODE_ENV === 'development' && module.hot) {
+    module.hot.accept('./reducers', () => {
+      store.replaceReducer(require('./reducers').default)
+    })
+  }
+
   return store
 }

src/types/user.js

@@ -1,5 +1,5 @@
 const prefix = 'USER/'
 
+export const REQUEST = prefix + 'REQUEST'
 export const SET = prefix + 'SET'
 export const RESET = prefix + 'RESET'
-