From 7539d767adfb005523998e694dc63c06e66b60d6 Mon Sep 17 00:00:00 2001 From: fbarl Date: Mon, 28 Nov 2016 16:33:49 +0100 Subject: [PATCH] Switched to using webpack-dev-middleware instead of webpack-dev-server directly --- client/.babelrc | 3 +- client/app/scripts/contrast-main.js | 5 +-- client/app/scripts/main.dev.js | 5 +-- client/app/scripts/main.js | 5 +-- client/app/scripts/terminal-main.js | 12 ++---- client/app/styles/contrast.less | 2 +- client/package.json | 4 +- client/server.js | 61 ++++++++++++----------------- client/webpack.local.config.js | 38 ++++++------------ 9 files changed, 49 insertions(+), 86 deletions(-) diff --git a/client/.babelrc b/client/.babelrc index e936772e3e..86c445f545 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -1,4 +1,3 @@ { - "presets": ["es2015", "react"], - "plugins": ["react-hot-loader/babel"] + "presets": ["es2015", "react"] } diff --git a/client/app/scripts/contrast-main.js b/client/app/scripts/contrast-main.js index dd203a9e9e..707094e182 100644 --- a/client/app/scripts/contrast-main.js +++ b/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(( - - - + ), document.getElementById('app')); } diff --git a/client/app/scripts/main.dev.js b/client/app/scripts/main.dev.js index 93db134e91..96d5353ea3 100644 --- a/client/app/scripts/main.dev.js +++ b/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(( - - - + ), document.getElementById('app')); diff --git a/client/app/scripts/main.js b/client/app/scripts/main.js index 147755f93c..a7c74057fd 100644 --- a/client/app/scripts/main.js +++ b/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(( - - - + ), document.getElementById('app')); } diff --git a/client/app/scripts/terminal-main.js b/client/app/scripts/terminal-main.js index 7e2f2e75ec..149c801287 100644 --- a/client/app/scripts/terminal-main.js +++ b/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(( - - - - , - document.getElementById('app') - ); + + + ), document.getElementById('app')); } renderApp(); diff --git a/client/app/styles/contrast.less b/client/app/styles/contrast.less index d4ba24922a..04bf7fe534 100644 --- a/client/app/styles/contrast.less +++ b/client/app/styles/contrast.less @@ -34,4 +34,4 @@ /* specific elements */ @body-background-color: #FFF; -@label-background-color: #FFF; \ No newline at end of file +@label-background-color: #FFF; diff --git a/client/package.json b/client/package.json index b335502a2b..3456d8d86c 100644 --- a/client/package.json +++ b/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", diff --git a/client/server.js b/client/server.js index 2da0e15d34..84e186b853 100644 --- a/client/server.js +++ b/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,45 @@ 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, + watchOptions: { + aggregateTimeout: 500, + poll: 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 +86,7 @@ server.on('upgrade', backendProxy.ws.bind(backendProxy)); /************************************************************* * - * path proxy server + * Path proxy server * *************************************************************/ diff --git a/client/webpack.local.config.js b/client/webpack.local.config.js index 23ff25bdf6..944ddd7df5 100644 --- a/client/webpack.local.config.js +++ b/client/webpack.local.config.js @@ -4,66 +4,54 @@ 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', - // 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', 'd3', 'dagre', 'filesize', 'immutable', 'lodash', 'moment', 'page', 'react', 'react-dom', 'react-motion', 'react-redux', 'redux', 'redux-thunk', 'reqwest', 'xterm'] }, - // 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.OccurrenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),