added a quick express server to work out hot-reloading pains

.babelrc

@@ -8,25 +8,23 @@
       ],
       "plugins": [
         "transform-decorators-legacy",
-        "react-hot-loader/babel",
         "transform-regenerator"
       ]
     },
 
     "client": {
       "presets": [
-        "es2015-webpack",
+        "es2015",
         "react"
       ],
       "plugins": [
-        "transform-decorators-legacy",
-        "react-hot-loader/babel"
+        "transform-decorators-legacy"
       ]
     },
 
     "client-build": {
       "presets": [
-        "es2015-webpack",
+        "es2015",
         "react"
       ],
       "plugins": [

nodemon.json

@@ -6,7 +6,8 @@
   ],
   "verbose": true,
   "watch": [
-    "server/"
+    "src/server/",
+    "src/express-server/"
   ],
   "ext": "js json"
 }

package.json

@@ -6,14 +6,15 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node ./src/server/babel-server.js",
-    "build": "cross-env BABEL_ENV=client-build webpack --config webpack.config.client.js --env.prod",
+    "build": "cross-env NODE_ENV=production BABEL_ENV=client-build webpack --config webpack.config.client.js",
     "dev": "cross-env NODE_ENV=development nodemon ./src/server/babel-server.js"
   },
   "author": "Paul Myburgh",
   "license": "ISC",
   "dependencies": {
     "babel-register": "^6.11.6",
     "bluebird": "^3.4.1",
+    "express": "^4.14.0",
     "koa": "^2.0.0-alpha.4",
     "koa-compose": "^3.1.0",
     "koa-compress": "^2.0.0",
@@ -25,6 +26,7 @@
     "koa-static": "^3.0.0",
     "mobx": "^2.4.1",
     "mobx-react": "^3.5.3",
+    "morgan": "^1.7.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0"
   },
@@ -36,14 +38,17 @@
     "babel-plugin-transform-regenerator": "^6.11.4",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015-native-modules": "^6.9.3",
     "babel-preset-es2015-webpack": "^6.4.2",
     "babel-preset-react": "^6.11.1",
+    "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
     "babel-preset-stage-3": "^6.11.0",
     "cross-env": "^2.0.0",
     "json-loader": "^0.5.4",
     "koa-webpack-middleware": "^1.0.1",
-    "react-hot-loader": "^3.0.0-beta.1",
-    "webpack": "^2.1.0-beta.20"
+    "webpack": "^1.13.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.2"
   }
 }

src/crossover/entry.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import App from '../client/react/App';
 
 /*
@@ -10,9 +9,7 @@ import App from '../client/react/App';
 
 export function baseReact(options) {
   return (
-    <AppContainer>
-      <App />
-    </AppContainer>
+    <App />
   );
 }
 

src/express-server/babel-server.js

@@ -0,0 +1,4 @@
+process.env.BABEL_ENV = "server";
+
+require('babel-register');
+require('./server');

src/express-server/server.js

@@ -0,0 +1,45 @@
+import express from 'express';
+import morgan from 'morgan';
+
+import { renderToString } from 'react-dom/server';
+import { baseReact } from '../crossover/entry';
+
+const app = express();
+
+app.use(morgan('combined'));
+
+if (process.env.NODE_ENV === "development") {
+	console.log("development environment, starting HMR");
+
+	const webpack = require('webpack');
+	const config = require('../../webpack.config.client');
+
+	const compiler = webpack(config);
+
+	app.use(require('webpack-dev-middleware')(compiler, {
+		noInfo: true,
+		publicPath: config.output.publicPath
+	}));
+
+	app.use(require('webpack-hot-middleware')(compiler));
+}
+
+app.get('/*', (req, res) => {
+	const html = renderToString(
+		baseReact()
+	);
+
+	res.render('base', {
+		html,
+		initialState: {
+			what: "what",
+		},
+	});
+});
+
+app.set('views', './src/server/views');
+app.set('view engine', 'pug');
+
+const server = app.listen(3000, () => {
+	console.log(`App listening at ${server.address().address}:${server.address().port}`);
+})

src/server/middleware/basicMiddleware.js

@@ -37,7 +37,10 @@ export function serveStaticFiles() {
 export function developmentMiddleware() {
 	console.log("Development environment, starting HMR");
 
-	const devConfigBuilt = devConfig({ env: { prod: false } });
+	// FOR WEBPACK v2
+	// const devConfigBuilt = devConfig({ env: { prod: false } });
+
+	const devConfigBuilt = devConfig;
 	const compile = webpack(devConfigBuilt);
 
 	// console.dir(devConfigBuilt);

src/server/server.js

@@ -25,7 +25,7 @@ pug.use(app);
 
 app.use(serverLogging());
 app.use(baseErrorHandling());
-if (prod) app.use(compressResponse());
+// if (prod) app.use(compressResponse());
 app.use(serveStaticFiles());
 app.use(route.get('/', renderReact()));
 

webpack.config.client.js

@@ -1,70 +1,73 @@
 const { join } = require('path');
 const webpack = require('webpack');
 
-module.exports = (env) => {
-  console.log("Compiling client code with env set", env);
+const prod = process.env.NODE_ENV === "production";
+console.log(`Compiling client code with production set (${prod})`);
 
-  return ({
-    entry: !env.prod ? (
-      ['react-hot-loader/patch', 'webpack-hot-middleware/client', './src/crossover/entry.js']
-    ) : (
-      {
-        js: './src/crossover/entry.js',
-        vendor: ['react', 'react-dom'],
-      }
-    ),
-    target: 'web',
-    output: {
-      path: join(__dirname, 'dist'),
-      filename: 'bundle.js',
-      pathInfo: !env.prod,
-      publicPath: '/dist/',
-    },
-    devtool: env.prod ? 'source-map' : 'eval',
-    module: {
-      loaders: [
-        {
-          test: /\.(jsx?)$/,
-          exclude: /node_modules/,
-          loaders: [
-            'babel-loader',
-          ],
-        },
-      ],
-    },
-    plugins: !env.prod ? ([
-      new webpack.HotModuleReplacementPlugin(),
-      new webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify('development'),
-          BABEL_ENV: JSON.stringify('client'),
-        },
-      }),
-    ]) : ([
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'vendor',
-        minChunks: Infinity,
-        filename: 'vendor.bundle.js',
-      }),
-      new webpack.LoaderOptionsPlugin({
-        minimize: true,
-        debug: true,
-      }),
-      new webpack.optimize.UglifyJsPlugin({
-        compress: {
-          warnings: false,
-        },
-        output: {
-          comments: false,
-        },
-        sourceMap: false,
-      }),
-      new webpack.DefinePlugin({
-        'process.env': {
-          NODE_ENV: JSON.stringify('production'),
-          BABEL_ENV: JSON.stringify('client-build'),
-        },
-      }),
-    ]),
-  });
-};
+module.exports = {
+	entry: !prod ? (
+		['webpack-hot-middleware/client', './src/crossover/entry.js']
+	) : (
+	{
+		js: './src/crossover/entry.js',
+		vendor: ['react', 'react-dom'],
+	}
+	),
+	target: 'web',
+	output: {
+		path: join(__dirname, 'dist'),
+		filename: 'bundle.js',
+		pathInfo: !prod,
+		publicPath: '/dist/',
+	},
+	devtool: prod ? 'source-map' : 'eval',
+	module: {
+		loaders: [prod ?
+			{
+				test: /\.(jsx?)$/,
+				exclude: /node_modules/,
+				loaders: [
+					'babel-loader',
+				],
+			} : {
+				test: /\.(jsx?)$/,
+				loader: 'babel',
+				exclude: /node_modules/,
+				include: __dirname,
+				query: {
+					presets: ['react-hmre']
+				}
+			},
+		],
+	},
+	plugins: !prod ? ([
+		new webpack.HotModuleReplacementPlugin(),
+		new webpack.DefinePlugin({
+			'process.env': {
+				NODE_ENV: JSON.stringify('development'),
+				BABEL_ENV: JSON.stringify('client'),
+			},
+		}),
+	]) : ([
+		new webpack.optimize.CommonsChunkPlugin({
+			name: 'vendor',
+			minChunks: Infinity,
+			filename: 'vendor.bundle.js',
+		}),
+		new webpack.optimize.UglifyJsPlugin({
+			compress: {
+				warnings: false,
+			},
+			output: {
+				comments: false,
+			},
+			sourceMap: false,
+		}),
+		new webpack.DefinePlugin({
+			'process.env': {
+				NODE_ENV: JSON.stringify('production'),
+				BABEL_ENV: JSON.stringify('client-build'),
+			},
+		}),
+	]),
+}

webpackv2.config.client.js

@@ -0,0 +1,70 @@
+const { join } = require('path');
+const webpack = require('webpack');
+
+module.exports = (env) => {
+  console.log("Compiling client code with env set", env);
+
+  return ({
+    entry: !env.prod ? (
+      ['react-hot-loader/patch', 'webpack-hot-middleware/client', './src/crossover/entry.js']
+    ) : (
+      {
+        js: './src/crossover/entry.js',
+        vendor: ['react', 'react-dom'],
+      }
+    ),
+    target: 'web',
+    output: {
+      path: join(__dirname, 'dist'),
+      filename: 'bundle.js',
+      pathInfo: !env.prod,
+      publicPath: '/dist/',
+    },
+    devtool: env.prod ? 'source-map' : 'eval',
+    module: {
+      loaders: [
+        {
+          test: /\.(jsx?)$/,
+          exclude: /node_modules/,
+          loaders: [
+            'babel-loader',
+          ],
+        },
+      ],
+    },
+    plugins: !env.prod ? ([
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify('development'),
+          BABEL_ENV: JSON.stringify('client'),
+        },
+      }),
+    ]) : ([
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'vendor',
+        minChunks: Infinity,
+        filename: 'vendor.bundle.js',
+      }),
+      new webpack.LoaderOptionsPlugin({
+        minimize: true,
+        debug: true,
+      }),
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          warnings: false,
+        },
+        output: {
+          comments: false,
+        },
+        sourceMap: false,
+      }),
+      new webpack.DefinePlugin({
+        'process.env': {
+          NODE_ENV: JSON.stringify('production'),
+          BABEL_ENV: JSON.stringify('client-build'),
+        },
+      }),
+    ]),
+  });
+};