migrated workflow to react-transform

.babelrc

@@ -1,4 +1,9 @@
 {
   "presets": ["es2015", "stage-0", "react"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  },
   "plugins": ["transform-runtime"]
 }

client/components/MainSection/style.css

@@ -147,4 +147,4 @@
     transform: rotate(90deg);
     appearance: none;
   }
-}
+}

client/index.html

@@ -21,7 +21,7 @@
         s.parentNode.insertBefore(wf, s);
       })();
     </script>
-    <script src="./vendor.bundle.js"></script>
-    <script src="./bundle.js"></script>
+    <script src="./static/vendor.bundle.js"></script>
+    <script src="./static/bundle.js"></script>
   </body>
 </html>

client/index.js

@@ -1,4 +1,3 @@
-
 import { Router, Route, browserHistory } from 'react-router'
 import { Provider } from 'react-redux'
 import ReactDOM from 'react-dom'

devServer.js

@@ -0,0 +1,34 @@
+var path = require('path');
+var express = require('express');
+var webpack = require('webpack');
+var config = require('./webpack.config.dev');
+var ProgressPlugin = require('webpack/lib/ProgressPlugin');
+var ProgressBar = require('progress');
+
+var app = express();
+var compiler = webpack(config);
+var bar = new ProgressBar(':bar :message', {total: 100});
+
+compiler.apply(new ProgressPlugin(function(percentage, msg) {
+  bar.update(percentage, {
+    message: msg
+  });
+}));
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.get('*', function(req, res) {
+  res.sendFile(path.join(__dirname, '/client/index.html'));
+});
+
+app.listen(3000, 'localhost', function(err) {
+  if (err) {
+    console.log(err);
+    return;
+  }
+});

package.json

@@ -6,8 +6,10 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port 3000",
-    "build": "NODE_ENV=production webpack --progress --colors"
+    "start": "node devServer.js",
+    "clean": "rimraf static",
+    "build:webpack": "cross-env NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js",
+    "build": "npm run clean && npm run build:webpack"
   },
   "license": "MIT",
   "devDependencies": {
@@ -16,23 +18,28 @@
     "babel-plugin-transform-runtime": "^6.3.13",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
+    "babel-preset-react-hmre": "^1.0.1",
     "babel-preset-stage-0": "^6.3.13",
     "css-loader": "^0.23.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.4",
     "file-loader": "^0.8.4",
     "postcss-loader": "^0.8.0",
     "postcss-modules": "^0.1.3",
+    "progress": "^1.1.8",
+    "rimraf": "^2.5.1",
     "rucksack-css": "^0.8.5",
     "style-loader": "^0.12.4",
     "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.5.1",
     "webpack-dev-server": "^1.12.0",
-    "webpack-hot-middleware": "^2.2.0"
+    "webpack-hot-middleware": "^2.6.3"
   },
   "dependencies": {
     "babel-runtime": "^6.3.19",
     "classnames": "^2.1.2",
     "react": "^0.14.0",
     "react-dom": "^0.14.0",
-    "react-hot-loader": "^1.3.0",
     "react-redux": "^4.0.6",
     "react-router": "^2.0.0-rc5",
     "redux": "^3.0.2",

webpack.config.dev.js

@@ -0,0 +1,61 @@
+var rucksack = require('rucksack-css')
+var webpack = require('webpack')
+var path = require('path')
+
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  context: path.join(__dirname, './client'),
+  entry: {
+    jsx: [
+      'eventsource-polyfill', // necessary for hot reloading with IE
+      'webpack-hot-middleware/client',
+      './index'
+    ],
+    html: './index.html',
+    vendor: ['react']
+  },
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.html$/,
+        loader: 'file?name=[name].[ext]'
+      },
+      {
+        test: /\.css$/,
+        loaders: [
+          'style-loader',
+          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'postcss-loader'
+        ]
+      },
+      {
+        test: /\.jsx?/,
+        loaders: ['babel'],
+        exclude: /node_modules/,
+        include: path.join(__dirname, 'client')
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  postcss: [
+    rucksack({
+      autoprefixer: true
+    })
+  ],
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
+    })
+  ]
+}

webpack.config.js → webpack.config.prod.js

@@ -28,10 +28,9 @@ module.exports = {
         ]
       },
       {
-        test: /\.(js|jsx)$/,
+        test: /\.jsx?/,
         exclude: /node_modules/,
         loaders: [
-          'react-hot',
           'babel-loader'
         ]
       },