Merge pull request #2034 from weaveworks/use-webpack-dev-middleware

Using `webpack-dev-middleware` instead of `webpack-dev-server` directly

client/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["es2015", "react"],
-  "plugins": ["react-hot-loader/babel"]
+  "presets": ["es2015", "react"]
 }

client/app/scripts/contrast-main.js

@@ -6,7 +6,6 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { AppContainer } from 'react-hot-loader';
 import configureStore from './stores/configureStore';
 
 const store = configureStore();
@@ -15,9 +14,7 @@ function renderApp() {
   const App = require('./components/app').default;
   ReactDOM.render((
     <Provider store={store}>
-      <AppContainer>
-         <App />
-      </AppContainer>
+      <App />
     </Provider>
   ), document.getElementById('app'));
 }

client/app/scripts/main.dev.js

@@ -6,7 +6,6 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { AppContainer } from 'react-hot-loader';
 import configureStore from './stores/configureStore.dev';
 
 import DevTools from './components/dev-tools';
@@ -20,9 +19,7 @@ function renderApp() {
   const App = require('./components/app').default;
   ReactDOM.render((
     <Provider store={store}>
-      <AppContainer>
-         <App />
-      </AppContainer>
+      <App />
       <DevTools />
     </Provider>
   ), document.getElementById('app'));

client/app/scripts/main.js

@@ -6,7 +6,6 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { AppContainer } from 'react-hot-loader';
 import configureStore from './stores/configureStore';
 
 const store = configureStore();
@@ -15,9 +14,7 @@ function renderApp() {
   const App = require('./components/app').default;
   ReactDOM.render((
     <Provider store={store}>
-      <AppContainer>
-         <App />
-      </AppContainer>
+      <App />
     </Provider>
   ), document.getElementById('app'));
 }

client/app/scripts/terminal-main.js

@@ -5,21 +5,17 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { AppContainer } from 'react-hot-loader';
 import configureStore from './stores/configureStore';
 
 const store = configureStore();
 
 function renderApp() {
   const TerminalApp = require('./components/terminal-app').default;
-  ReactDOM.render(
+  ReactDOM.render((
     <Provider store={store}>
-      <AppContainer>
-        <TerminalApp />
-      </AppContainer>
-    </Provider>,
-    document.getElementById('app')
-  );
+      <TerminalApp />
+    </Provider>
+  ), document.getElementById('app'));
 }
 
 renderApp();

client/app/styles/contrast.less

@@ -34,4 +34,4 @@
 
 /* specific elements */
 @body-background-color: #FFF;
-@label-background-color: #FFF;
+@label-background-color: #FFF;

client/package.json

@@ -74,8 +74,8 @@
     "express": "~4.14.0",
     "http-proxy": "^1.15.2",
     "perfjankie": "^2.1.0",
-    "react-hot-loader": "3.0.0-beta.6",
-    "webpack-dev-server": "~1.16.2"
+    "webpack-dev-middleware": "^1.8.4",
+    "webpack-hot-middleware": "^2.13.2"
   },
   "scripts": {
     "build": "webpack --config webpack.production.config.js",

client/server.js

@@ -11,18 +11,11 @@ var WEBPACK_SERVER_HOST = process.env.WEBPACK_SERVER_HOST || 'localhost';
 
 /************************************************************
  *
- * Express routes for:
- *   - app.js
- *   - app-terminal.js
- *   - index.html
- *
- *   Proxy requests to:
- *     - /api -> :4040/api
+ * Proxy requests to:
+ *   - /api -> :4040/api
  *
  ************************************************************/
 
-// Proxy to backend
-
 var backendProxy = httpProxy.createProxy({
   ws: true,
   target: 'http://' + BACKEND_HOST + ':4040'
@@ -32,49 +25,41 @@ backendProxy.on('error', function(err) {
 });
 app.all('/api*', backendProxy.web.bind(backendProxy));
 
-// Serve application file depending on environment
+/************************************************************
+ *
+ * Production env serves precompiled content from build/
+ *
+ ************************************************************/
 
 if (process.env.NODE_ENV === 'production') {
-  // serve all precompiled content from build/
   app.use(express.static('build'));
-} else {
-  // redirect the JS bundles
-  app.get(/.*js/, function(req, res) {
-    res.redirect('//' + WEBPACK_SERVER_HOST + ':4041' + req.originalUrl);
-  });
-  // proxy everything else
-  var staticProxy = httpProxy.createProxy({
-    target: 'http://' + WEBPACK_SERVER_HOST + ':4041'
-  });
-  app.all('*', staticProxy.web.bind(staticProxy));
 }
 
 /*************************************************************
  *
- * Webpack Dev Server
+ * Webpack Dev Middleware with Hot Reload
  *
- * See: http://webpack.github.io/docs/webpack-dev-server.html
+ * See: https://github.com/webpack/webpack-dev-middleware;
+ *      https://github.com/glenjamin/webpack-hot-middleware
  *
  *************************************************************/
 
 if (process.env.NODE_ENV !== 'production') {
   var webpack = require('webpack');
-  var WebpackDevServer = require('webpack-dev-server');
+  var webpackMiddleware = require('webpack-dev-middleware');
+  var webpackHotMiddleware = require('webpack-hot-middleware');
   var config = require('./webpack.local.config');
+  var compiler = webpack(config);
 
-  new WebpackDevServer(webpack(config), {
-    hot: true,
+  app.use(webpackMiddleware(compiler, {
+    // required
+    publicPath: config.output.publicPath,
+    // options
     noInfo: true,
-    historyApiFallback: true,
     stats: 'errors-only',
-    // We need the access from the express server for the hot-loader.
-    // See: https://github.com/gaearon/react-hot-loader/issues/56
-    headers: { "Access-Control-Allow-Origin": '*' },
-  }).listen(4041, '0.0.0.0', function (err, result) {
-    if (err) {
-      console.log(err);
-    }
-  });
+  }));
+
+  app.use(webpackHotMiddleware(compiler));
 }
 
 
@@ -97,7 +82,7 @@ server.on('upgrade', backendProxy.ws.bind(backendProxy));
 
 /*************************************************************
  *
- * path proxy server
+ * Path proxy server
  *
  *************************************************************/
 

client/webpack.local.config.js

@@ -4,66 +4,56 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 /**
- * This is the Webpack configuration file for local development. It contains
- * local-specific configuration such as the React Hot Loader, as well as:
+ * This is the Webpack configuration file for local development.
+ * It contains local-specific configuration which includes:
  *
- * - The entry point of the application
- * - Where the output file should be
+ * - Hot reloading configuration
+ * - The entry points of the application
  * - Which loaders to use on what files to properly transpile the source
  *
  * For more information, see: http://webpack.github.io/docs/configuration.html
  */
 
- // Inject websocket url to dev backend
-const WEBPACK_SERVER_HOST = process.env.WEBPACK_SERVER_HOST || 'localhost';
-const DEV_SERVER_URL = `webpack-dev-server/client?http://${WEBPACK_SERVER_HOST}:4041`;
-
 module.exports = {
-
   // Efficiently evaluate modules with source maps
-  devtool: 'source-map',
+  devtool: 'eval-source-map',
 
-  // Set entry point include necessary files for hot load
+  // Set entry points with hot loading
   entry: {
     app: [
-      'react-hot-loader/patch',
-      DEV_SERVER_URL,
-      'webpack/hot/only-dev-server',
       './app/scripts/main',
+      'webpack-hot-middleware/client'
     ],
     'dev-app': [
-      'react-hot-loader/patch',
-      DEV_SERVER_URL,
-      'webpack/hot/only-dev-server',
       './app/scripts/main.dev',
+      'webpack-hot-middleware/client'
     ],
     'contrast-app': [
-      'react-hot-loader/patch',
-      DEV_SERVER_URL,
-      'webpack/hot/only-dev-server',
       './app/scripts/contrast-main',
+      'webpack-hot-middleware/client'
     ],
     'terminal-app': [
-      'react-hot-loader/patch',
-      DEV_SERVER_URL,
-      'webpack/hot/only-dev-server',
       './app/scripts/terminal-main',
+      'webpack-hot-middleware/client'
     ],
     vendors: ['babel-polyfill', 'classnames', 'dagre', 'filesize', 'immutable', 'lodash',
       'moment', 'page', 'react', 'react-dom', 'react-motion', 'react-redux', 'redux',
-      'redux-thunk', 'reqwest', 'xterm']
+      'redux-thunk', 'reqwest', 'xterm',
+      'webpack-hot-middleware/client'
+    ]
   },
 
-  // This will not actually create a app.js file in ./build. It is used
-  // by the dev server for dynamic hot loading.
+  // Used by Webpack Dev Middleware
   output: {
-    path: path.join(__dirname, 'build/'),
+    publicPath: '/',
+    path: '/',
     filename: '[name].js'
   },
 
   // Necessary plugins for hot load
   plugins: [
     new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
+    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),