Use webpack hot/dev middlewares

js/webpack/build.server.js

@@ -0,0 +1,39 @@
+// 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/>.
+// test only
+/**
+ * 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)
+ */
+
+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(wsProxy);
+
+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) => {
-      return pathname === '/' && req.method === 'HEAD';
-    },
+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' ]
       }
     ]
   },