Switch universal example to webpack-dev-middleware.

Author: timdorr

examples/universal/.babelrc

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "npm run server & npm run client",
     "server": "node server",
-    "client": "webpack && node webpack.server.js"
+    "client": "webpack"
   },
   "repository": {
     "type": "git",
@@ -33,6 +33,7 @@
     "babel-runtime": "^5.8.20",
     "react-transform-hmr": "^1.0.0",
     "webpack": "^1.11.0",
-    "webpack-dev-server": "^1.10.1"
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.2.0"
   }
 }

examples/universal/package.json

@@ -4,6 +4,11 @@ import path from 'path';
 import Express from 'express';
 import qs from 'qs';
 
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpackConfig from '../webpack.config';
+
 import React from 'react';
 import { Provider } from 'react-redux';
 
@@ -14,6 +19,11 @@ import { fetchCounter } from '../common/api/counter';
 const app = new Express();
 const port = 3000;
 
+// Use this middleware to set up hot module reloading via webpack.
+const compiler = webpack(webpackConfig);
+app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
+app.use(webpackHotMiddleware(compiler, { log: console.log, path: '/__webpack_hmr', heartbeat: 10 * 1000 }));
+
 // Use this middleware to server up static files built into dist
 app.use(require('serve-static')(path.join(__dirname, '../dist')));
 

examples/universal/server/server.js

@@ -1,30 +1,46 @@
 var path = require('path');
 var webpack = require('webpack');
-var host = 'localhost';
-var port = 3001;
 
 module.exports = {
-  devServerPort: port,
   devtool: 'inline-source-map',
   entry: [
-    'webpack-dev-server/client?http://' + host + ':' + port,
-    'webpack/hot/only-dev-server',
+    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
     './client/index.js'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: 'http://' + host + ':' + port + '/dist/'
+    publicPath: '/dist/'
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
   ],
   module: {
     loaders: [{
       test: /\.js$/,
-      loaders: ['babel?optional=runtime'],
+      loader: 'babel',
       exclude: /node_modules/,
-      include: __dirname
+      include: __dirname,
+      query: {
+        optional: ['runtime'],
+        stage: 2,
+        env: {
+          development: {
+            plugins: [
+              'react-transform'
+            ],
+            extra: {
+              'react-transform': [{
+                target:  'react-transform-hmr',
+                imports: ['react'],
+                locals:  ['module']
+              }]
+            }
+          }
+        }
+      }
     }]
   }
 };