assemble redux stuffs, merge actions and reducers in a single file.

package.json

@@ -6,8 +6,9 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors --port 3000",
-    "build": "NODE_ENV=production webpack --progress --colors"
+    "start": "node server/index.js",
+    "build": "NODE_ENV=production webpack --progress --colors",
+    "start@prod": "npm run build & NODE_ENV=production npm run start"
   },
   "license": "MIT",
   "devDependencies": {
@@ -17,23 +18,25 @@
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
+    "babel-runtime": "^6.5.0",
+    "classnames": "^2.2.3",
+    "connect-history-api-fallback": "^1.1.0",
     "css-loader": "^0.23.1",
+    "express": "^4.13.4",
     "file-loader": "^0.8.5",
     "postcss-loader": "^0.8.1",
-    "rucksack-css": "^0.8.5",
-    "style-loader": "^0.13.0",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-hot-middleware": "^2.7.1",
-    "babel-runtime": "^6.5.0",
-    "classnames": "^2.2.3",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-hot-loader": "^1.3.0",
     "react-redux": "^4.4.0",
     "react-router": "^2.0.0",
     "react-router-redux": "^4.0.0",
     "redux": "^3.3.1",
-    "redux-actions": "^0.9.1"
+    "redux-actions": "^0.9.1",
+    "rucksack-css": "^0.8.5",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-hot-middleware": "^2.7.1"
   }
 }

server/index.js

@@ -0,0 +1,43 @@
+const express = require('express')
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const webpackConfig = require('../webpack.config.js')
+const history = require('connect-history-api-fallback');
+const CLIENT_PORT = 3000
+const SERVER_PORT = 3001
+
+const app = express()
+
+/*
+  Development Env: enable the HotReplacementPugin dynamically
+  Production Env: Set the Server's static path to the webpack build(output) path.
+*/
+if(app.get('env') === 'development'){
+  webpackConfig.entry.jsx = [webpackConfig.entry.jsx]
+  webpackConfig.entry.jsx.unshift(`webpack-dev-server/client?http://localhost:${CLIENT_PORT}/`, "webpack/hot/dev-server")
+  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
+  const devServer= new WebpackDevServer(webpack(webpackConfig), {
+    contentBase: __dirname + '/../client', 
+    hot: true,
+    historyApiFallback: true,
+    //proxy the server port, easy to avoid cross-domain while requesting the APIs
+    proxy: {
+      "/api/*": `http://localhost:${SERVER_PORT}`,
+      // "*": `http://localhost:${SERVER_PORT}`
+    },
+    stats: { colors: true },
+  }).listen(CLIENT_PORT)
+}
+else{
+  // enable history-api-fallback
+  app.use(history())
+  app.use(express.static(__dirname + '/../static'))
+}
+
+app.get('/api/test', function (req, res) {
+  res.send('The APIs works!')
+});
+
+app.listen(SERVER_PORT, function () {
+  console.log(`API Server listening on port ${SERVER_PORT}!`)
+});