Use webpack hot/dev middlewares

js/package.json

@@ -35,7 +35,7 @@
     "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor",
     "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm",
     "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app",
-    "start:app": "webpack-dev-server --config webpack/config -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
+    "start:app": "node webpack/dev.server",
     "clean": "rm -rf ./build ./coverage",
     "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
     "lint": "eslint --ignore-path .gitignore ./src/",
@@ -80,6 +80,7 @@
     "eslint-plugin-promise": "~2.0.0",
     "eslint-plugin-react": "~5.1.1",
     "eslint-plugin-standard": "~2.0.0",
+    "express": "~4.14.0",
     "extract-loader": "0.0.2",
     "extract-text-webpack-plugin": "~1.0.1",
     "file-loader": "~0.8.5",
@@ -88,6 +89,7 @@
     "history": "~2.0.0",
     "html-loader": "~0.4.4",
     "html-webpack-plugin": "~2.24.1",
+    "http-proxy-middleware": "~0.17.2",
     "husky": "~0.11.9",
     "ignore-styles": "2.0.0",
     "image-webpack-loader": "~1.8.0",
@@ -115,7 +117,7 @@
     "style-loader": "~0.13.0",
     "url-loader": "~0.5.7",
     "webpack": "~1.13.2",
-    "webpack-dev-server": "~1.15.2",
+    "webpack-dev-middleware": "~1.8.4",
     "webpack-error-notification": "0.1.6",
     "webpack-hot-middleware": "~2.13.2",
     "websocket": "~1.0.23"

js/src/views/Dapps/dappsStore.js

@@ -128,9 +128,15 @@ export default class DappsStore {
   }
 
   _getHost (api) {
-    return process.env.NODE_ENV === 'production'
+    const host = process.env.DAPPS_URL || (process.env.NODE_ENV === 'production'
       ? this._api.dappsUrl
-      : '';
+      : '');
+
+    if (host === '/') {
+      return '';
+    }
+
+    return host;
   }
 
   _fetchBuiltinApps () {

js/webpack/build.server.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 // test only
 /**
- * Run `PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build`
+ * Run `DAPPS_URL="/" PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build`
  * to build the project ; use this server to test that the minifed
  * version is working (this is a simple proxy server)
  */
@@ -23,39 +23,17 @@
 var express = require('express');
 var proxy = require('http-proxy-middleware');
 
+var Shared = require('./shared');
+
 var app = express();
 var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true });
 
+Shared.addProxies(app);
+
 app.use(express.static('.build'));
-
-app.use('/api/*', proxy({
-  target: 'http://127.0.0.1:8080',
-  changeOrigin: true
-}));
-
-app.use('/app/*', proxy({
-  target: 'http://127.0.0.1:8080',
-  changeOrigin: true,
-  pathRewrite: {
-    '^/app': ''
-  }
-}));
-
-app.use('/parity-utils/*', proxy({
-  target: 'http://127.0.0.1:3000',
-  changeOrigin: true,
-  pathRewrite: {
-    '^/parity-utils': ''
-  }
-}));
-
-app.use('/rpc/*', proxy({
-  target: 'http://127.0.0.1:8080',
-  changeOrigin: true
-}));
-
 app.use(wsProxy);
 
-var server = app.listen(3000);
-
+var server = app.listen(process.env.PORT || 3000, function () {
+  console.log('Listening on port', server.address().port);
+});
 server.on('upgrade', wsProxy.upgrade);

js/webpack/config.js

@@ -40,6 +40,7 @@ module.exports = {
     index: './index.js'
   }),
   output: {
+    publicPath: '/',
     path: path.join(__dirname, '../', DEST),
     filename: '[name].[hash].js'
   },
@@ -145,13 +146,5 @@ module.exports = {
     }
 
     return plugins;
-  }()),
-
-  devServer: {
-    contentBase: path.resolve(__dirname, `../${DEST}`),
-    historyApiFallback: false,
-    quiet: false,
-    hot: !isProd,
-    proxy: Shared.proxies
-  }
+  }())
 };

js/webpack/dev.server.js

@@ -0,0 +1,68 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+
+const http = require('http');
+const express = require('express');
+
+const webpackConfig = require('./config');
+const Shared = require('./shared');
+
+const hotMiddlewareScript = 'webpack-hot-middleware/client';
+
+/**
+ * Add webpack hot middleware to each entry in the config
+ * and HMR to the plugins
+ */
+(function updateWebpackConfig () {
+  Object.keys(webpackConfig.entry).forEach((key) => {
+    const entry = webpackConfig.entry[key];
+
+    webpackConfig.entry[key] = [].concat(entry, hotMiddlewareScript);
+  });
+
+  webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
+  webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
+})();
+
+const app = express();
+const compiler = webpack(webpackConfig);
+
+app.use(webpackDevMiddleware(compiler, {
+  noInfo: false,
+  quiet: false,
+  publicPath: webpackConfig.output.publicPath,
+  stats: {
+    colors: true
+  }
+}));
+
+app.use(webpackHotMiddleware(compiler, {
+  log: console.log
+}));
+
+app.use(express.static(webpackConfig.output.path));
+
+// Add the dev proxies in the express App
+Shared.addProxies(app);
+
+const server = http.createServer(app);
+server.listen(process.env.PORT || 3000, function () {
+  console.log('Listening on port', server.address().port);
+});

js/webpack/shared.js

@@ -46,18 +46,26 @@ function getPlugins (_isProd = isProd) {
       ]
     }),
 
+    new HappyPack({
+      id: 'babel',
+      threads: 4,
+      loaders: ['babel']
+    }),
+
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(ENV),
         RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
         PARITY_URL: JSON.stringify(process.env.PARITY_URL),
+        DAPPS_URL: JSON.stringify(process.env.DAPPS_URL),
         LOGGING: JSON.stringify(!isProd)
       }
-    })
+    }),
+
+    new webpack.optimize.OccurrenceOrderPlugin(!_isProd)
   ];
 
   if (_isProd) {
-    plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
     plugins.push(new webpack.optimize.DedupePlugin());
     plugins.push(new webpack.optimize.UglifyJsPlugin({
       screwIe8: true,
@@ -97,47 +105,48 @@ const postcss = [
   })
 ];
 
-const proxies = [
-  {
-    context: (pathname, req) => {
+function addProxies (app) {
+  const proxy = require('http-proxy-middleware');
+
+  app.use(proxy((pathname, req) => {
     return pathname === '/' && req.method === 'HEAD';
-    },
+  }, {
     target: 'http://127.0.0.1:8180',
     changeOrigin: true,
     autoRewrite: true
-  },
-  {
-    context: '/api',
+  }));
+
+  app.use('/api', proxy({
     target: 'http://127.0.0.1:8080',
     changeOrigin: true,
     autoRewrite: true
-  },
-  {
-    context: '/app',
+  }));
+
+  app.use('/app', proxy({
     target: 'http://127.0.0.1:8080',
     changeOrigin: true,
     pathRewrite: {
       '^/app': ''
     }
-  },
-  {
-    context: '/parity-utils',
+  }));
+
+  app.use('/parity-utils', proxy({
     target: 'http://127.0.0.1:3000',
     changeOrigin: true,
     pathRewrite: {
       '^/parity-utils': ''
     }
-  },
-  {
-    context: '/rpc',
+  }));
+
+  app.use('/rpc', proxy({
     target: 'http://127.0.0.1:8080',
     changeOrigin: true
+  }));
 }
-];
 
 module.exports = {
   getPlugins: getPlugins,
   dappsEntry: getDappsEntry(),
-  postcss: postcss,
-  proxies: proxies
+  addProxies: addProxies,
+  postcss: postcss
 };

js/webpack/vendor.js

@@ -29,6 +29,7 @@ let modules = [
   'brace',
   'browserify-aes',
   'chart.js',
+  'ethereumjs-tx',
   'lodash',
   'material-ui',
   'mobx',
@@ -57,7 +58,8 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        loaders: [ 'happypack/loader?id=js' ]
+        include: /(ethereumjs-tx)/,
+        loaders: [ 'happypack/loader?id=babel' ]
       }
     ]
   },