react redux

.babelrc

@@ -1,6 +1,10 @@
 {
   "presets": [
     "env",
-    "flow"
+    "flow",
+    "react"
+  ],
+  "plugins": [
+    "flow-react-proptypes"
   ]
 }

.eslintrc.json

@@ -1,18 +1,19 @@
 {
-  "extends": [
-    "airbnb",
-    "plugin:flowtype/recommended"
-  ],
-  "rules": {
-   "semi": [2, "never"],
-   "no-unexpected-multiline": 2,
-    "compat/compat": 2
- },
-  "plugins": [
-    "flowtype",
-    "compat"
-  ],
-  "env": {
-    "jest": true
-  }
+    "extends": [
+        "airbnb",
+        "plugin:flowtype/recommended"
+    ],
+    "rules": {
+        "semi": [2, "never"],
+        "no-unexpected-multiline": 2,
+        "compat/compat": 2
+    },
+    "plugins": [
+        "flowtype",
+        "compat"
+    ],
+    "env": {
+        "browser": true,
+        "jest": true
+    }
 }

.gitignore

@@ -3,3 +3,4 @@
 node_modules/
 /coverage/
 /lib/
+/dist/

package.json

@@ -1,43 +1,59 @@
 {
-    "name": "your-project",
-    "version": "1.0.0",
-    "license": "MIT",
-    "scripts": {
-        "start": "yarn dev:start",
-        "dev:start": "nodemon --ignore lib --exec babel-node src/server",
-        "prod:build": "rimraf lib && babel src -d lib --ignore .test.js",
-        "prod:start": "NODE_ENV=production pm2 start lib/server && pm2 logs",
-        "prod:stop": "pm2 delete server",
-        "test": "eslint src && flow && jest --coverage",
-        "precommit": "yarn test",
-        "prepush": "yarn test  && yarn prod:build"
-    },
-    "browserslist": [
-        "> 1%"
-    ],
-    "dependencies": {
-        "common-tags": "^1.4.0",
-        "compression": "^1.6.2",
-        "express": "^4.15.2"
-    },
-    "devDependencies": {
-        "babel-cli": "^6.24.0",
-        "babel-eslint": "^7.2.1",
-        "babel-jest": "^19.0.0",
-        "babel-preset-env": "^1.2.2",
-        "babel-preset-flow": "^6.23.0",
-        "eslint": "^3.18.0",
-        "eslint-config-airbnb": "^14.1.0",
-        "eslint-plugin-compat": "^1.0.2",
-        "eslint-plugin-flowtype": "^2.30.4",
-        "eslint-plugin-import": "^2.2.0",
-        "eslint-plugin-jsx-a11y": "^3.0.2 || ^4.0.0",
-        "eslint-plugin-react": "^6.9.0",
-        "flow-bin": "^0.42.0",
-        "husky": "^0.13.3",
-        "jest": "^19.0.2",
-        "nodemon": "^1.11.0",
-        "pm2": "^2.4.4",
-        "rimraf": "^2.6.1"
-    }
+  "name": "your-project",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "yarn dev:start",
+    "dev:start": "nodemon  -e js,jsx --ignore dist --ignore lib --exec babel-node src/server",
+    "dev:wds": "webpack-dev-server --progress",
+    "prod:build": "rimraf lib && babel src -d lib --ignore .test.js",
+    "prod:start": "NODE_ENV=production pm2 start lib/server && pm2 logs",
+    "prod:stop": "pm2 delete server",
+    "lint": "eslint src webpack.config.babel.js --ext .js,.jsx",
+    "test": "eslint src && flow && jest --coverage",
+    "precommit": "yarn test",
+    "prepush": "yarn test  && yarn prod:build"
+  },
+  "browserslist": [
+    "> 1%"
+  ],
+  "dependencies": {
+    "babel-polyfill": "^6.23.0",
+    "common-tags": "^1.4.0",
+    "compression": "^1.6.2",
+    "express": "^4.15.2",
+    "immutable": "4.0.0-rc.2",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-hot-loader": "next",
+    "react-redux": "^5.0.4",
+    "redux": "^3.6.0",
+    "redux-actions": "^2.0.2"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.0",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.1",
+    "babel-jest": "^19.0.0",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-flow-react-proptypes": "^2.1.3",
+    "babel-preset-env": "^1.2.2",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^3.18.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-compat": "^1.0.2",
+    "eslint-plugin-flowtype": "^2.30.4",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2 || ^4.0.0",
+    "eslint-plugin-react": "^6.9.0",
+    "flow-bin": "^0.42.0",
+    "husky": "^0.13.3",
+    "jest": "^19.0.2",
+    "nodemon": "^1.11.0",
+    "pm2": "^2.4.4",
+    "rimraf": "^2.6.1",
+    "webpack": "^2.4.1",
+    "webpack-dev-server": "^2.4.2"
+  }
 }

src/client/action/hello.js

@@ -0,0 +1,7 @@
+// @flow
+
+import { createAction } from 'redux-actions'
+
+export const SAY_HELLO = 'SAY_HELLO'
+
+export const sayHello = createAction(SAY_HELLO)

src/client/app.jsx

@@ -0,0 +1,7 @@
+// @flow
+
+import React from 'react'
+
+const App = () => <h1>Hello React!</h1>
+
+export default App

src/client/index.jsx

@@ -0,0 +1,29 @@
+// @flow
+
+import 'babel-polyfill'
+import React from 'react'
+import ReactDom from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+
+import App from './app'
+import {
+    APP_CONTAINER_SELECTOR,
+} from '../shared/config'
+
+const rootEl = document.querySelector(APP_CONTAINER_SELECTOR)
+
+const wrapApp = AppComponent =>
+  <AppContainer>
+    <AppComponent />
+  </AppContainer>
+
+ReactDom.render(<App />, rootEl)
+
+if (module.hot) {
+  // flow-disable-next-line
+  module.hot.accept('./app', () => {
+    // eslint-disable-next-line global-require
+    const NextApp = require('./app').default
+    ReactDom.render(wrapApp(NextApp), rootEl)
+  })
+}

src/client/reducer/hello.js

@@ -0,0 +1,19 @@
+import Immutable from 'immutable'
+import type { fromJS as Immut } from 'immutable'
+
+import { SAY_HELLO } from '../action/hello'
+
+const initialState = Immutable.fromJS({
+  message: 'Initial reducer state',
+})
+
+const helloReducer = (state: Immut = initialState, action: { type: string, payload: any }) => {
+  switch (action.type) {
+    case SAY_HELLO:
+      return state.set('message', action.payload)
+    default:
+      return state
+  }
+}
+
+export default helloReducer

src/server/index.js

@@ -3,8 +3,14 @@
 import compression from 'compression'
 import express from 'express'
 
-import { APP_NAME, STATIC_PATH, WEB_PORT } from '../shared/config'
-import { isProd } from '../shared/util'
+import {
+  APP_NAME,
+  STATIC_PATH,
+  WEB_PORT,
+} from '../shared/config'
+import {
+  isProd,
+} from '../shared/util'
 import renderApp from './render-app'
 
 const app = express()
@@ -19,5 +25,6 @@ app.get('/', (req, res) => {
 
 app.listen(WEB_PORT, () => {
   // eslint-disable-next-line no-console
-  console.log(`Server running on port ${WEB_PORT} ${isProd ? '(production)' : '(development)'}.`)
+  console.log(`Server running on port ${WEB_PORT} ${isProd ? '(production)' :
+    '(development).\nKeep "yarn dev:wds" running in an other terminal'}.`)
 })

src/server/render-app.js

@@ -1,17 +1,24 @@
 // @flow
 
-import { html } from 'common-tags'
-import { STATIC_PATH } from '../shared/config'
+import {
+  APP_CONTAINER_CLASS,
+  STATIC_PATH,
+  WDS_PORT,
+} from '../shared/config'
+import {
+  isProd,
+} from '../shared/util'
 
 const renderApp = (title: string) =>
-html`<!doctype html>
+  `<!doctype html>
 <html>
   <head>
     <title>${title}</title>
     <link rel="stylesheet" href="${STATIC_PATH}/css/style.css">
   </head>
   <body>
-    <h1>${title}</h1>
+    <div class="${APP_CONTAINER_CLASS}"></div>
+    <script src="${isProd ? STATIC_PATH : `http://localhost:${WDS_PORT}/dist`}/js/bundle.js"></script>
   </body>
 </html>
 `

src/shared/config.js

@@ -2,3 +2,6 @@
 export const WEB_PORT = process.env.PORT || 8000
 export const STATIC_PATH = '/static'
 export const APP_NAME = 'Hello App'
+export const WDS_PORT = 7000
+export const APP_CONTAINER_CLASS = 'js-app'
+export const APP_CONTAINER_SELECTOR = `.${APP_CONTAINER_CLASS}`

webpack.config.babel.js

@@ -0,0 +1,44 @@
+// @flow
+
+import path from 'path'
+import webpack from 'webpack'
+
+import {
+  WDS_PORT,
+} from './src/shared/config'
+import {
+  isProd,
+} from './src/shared/util'
+
+export default {
+  entry: [
+    'react-hot-loader/patch',
+    './src/client',
+  ],
+  output: {
+    filename: 'js/bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: isProd ? '/static/' : `http://localhost:${WDS_PORT}/dist/`,
+  },
+  module: {
+    rules: [{
+      test: /\.(js|jsx)$/,
+      use: 'babel-loader',
+      exclude: /node_modules/,
+    }],
+  },
+  devtool: isProd ? false : 'source-map',
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  devServer: {
+    port: WDS_PORT,
+    hot: true,
+  },
+  plugins: [
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+  ],
+}