hot reload + api / production on 3000 to match CRA

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 Create React App with hot reloading containers and the api backend concurrently
 ```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,10 +18,12 @@
     "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": "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",
     "build": "react-scripts build",

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

@@ -10,12 +10,12 @@ class Api {
     const {token} = options
     this.token = token
   }
-  getJsonHeaders(){
+  _getJsonHeaders(){
     return {
       'Accept': 'application/json'
     }
   }
-  postJsonHeaders(){
+  _postJsonHeaders(){
     return {
       'Accept': 'application/json'
     , 'Content-Type': 'application/json'
@@ -24,21 +24,26 @@ class Api {
   setToken(token){
     this.token = token
   }
-  handleUnauthed(res){
-    if (res.status === 401) {
-      return new Promise(()=>{})
-    } else {
-      return res
-    }
-  }
   _buildQueryString(data){
     return '?' + Object.keys(data).map(d=>d+'='+encodeURIComponent(data[d]))
   }
+  // Don't want to be too opinionated here, just a basic one
+  _handleStatus(res){
+    if (res.ok){
+      return res.json()
+    }
+    throw new Error(res.statusText)
+  }
 }
 
 export class MainApi extends Api{
   constructor(options){
     super(options)
     this.prefix = '/api'
   }
+  getUser(id){
+    return fetch(`${this.apiUrl}${this.prefix}/users/${id}`, {
+      headers: this._getJsonHeaders()
+    }).then(this._handleStatus)
+  }
 }

src/config.js

@@ -1,6 +1,6 @@
-let apiUrl = 'http://localhost:3001'
-if (process.env.NODE_ENV === 'production') {
-  apiUrl = ''
+let apiUrl = ''
+if (process.env.REACT_APP_API_URL) {
+  apiUrl = process.env.REACT_APP_API_URL
 }
 export {
   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 { MainApi } from '../api'
+
+const api = new MainApi()
+
+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'
-