Switch to webpack dev server.

README.md

@@ -30,14 +30,13 @@ npm run test:int # run tests with Jest
 
 #### Dev (HTTPS):
 
-1. Create your own SSL Certificate (Heroku has a [nice guide here](https://devcenter.heroku.com/articles/ssl-certificate-self))
-2. Move the `.key` and `.crt` files into `webpack_config/server.*`
-3. Run the following command:
-
 ```bash
 npm run dev:https
 ```
 
+Necessary for certain features. The generated certificate will be invalid, just
+accept it in your browser.
+
 #### Address Derivation Checker:
 
 EthereumJS-Util previously contained a bug that would incorrectly derive addresses from private keys with a 1/128 probability of occurring. A summary of this issue can be found [here](https://www.reddit.com/r/ethereum/comments/48rt6n/using_myetherwalletcom_just_burned_me_for/d0m4c6l/).

package.json

@@ -128,6 +128,7 @@
     "url-search-params-polyfill": "2.0.2",
     "webpack": "3.10.0",
     "webpack-dev-middleware": "2.0.4",
+    "webpack-dev-server": "2.11.1",
     "webpack-hot-middleware": "2.21.0",
     "webpack-sources": "1.0.1",
     "webpack-subresource-integrity": "1.0.3",
@@ -152,9 +153,9 @@
     "test:int": "jest --config=jest_config/jest.int.config.json --coverage",
     "updateSnapshot": "jest --config=jest_config/jest.config.json --updateSnapshot",
     "pretest": "check-node-version --package",
-    "dev": "node webpack_config/devServer.js",
+    "dev": "webpack-dev-server --config webpack_config/webpack.dev.js",
     "predev": "check-node-version --package",
-    "dev:https": "HTTPS=true node webpack_config/devServer.js",
+    "dev:https": "HTTPS=true webpack-dev-server --config webpack_config/webpack.dev.js",
     "predev:https": "check-node-version --package",
     "dev:electron": "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true node webpack_config/devServer.js' 'webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'",
     "dev:electron:https": "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true HTTPS=true node webpack_config/devServer.js' 'HTTPS=true webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'",

webpack_config/config.js

@@ -22,7 +22,14 @@ module.exports = {
   typescriptRule: {
     test: /\.(ts|tsx)$/,
     include: [paths.src, paths.shared, paths.electron],
-    use: [{ loader: 'ts-loader', options: { happyPackMode: true, logLevel: 'info' } }],
+    use: [{
+      loader: 'ts-loader',
+      options: {
+        happyPackMode: true,
+        logLevel: 'info',
+        silent: true
+      }
+    }],
     exclude: ['assets', 'sass', 'vendor', 'translations/lang']
       .map(dir => path.resolve(paths.src, dir))
       .concat([paths.modules])

webpack_config/devServer.js

@@ -1,86 +0,0 @@
-'use strict';
-const path = require('path');
-const express = require('express');
-const webpack = require('webpack');
-const https = require('https');
-const fs = require('fs');
-const webpackConfig = require('./webpack.dev');
-const config = require('./config');
-const LogPlugin = require('./plugins/serverLog');
-
-const app = express();
-
-const port = config.port;
-webpackConfig.entry.client = [
-  'react-hot-loader/patch',
-  'webpack-hot-middleware/client?reload=true',
-  'webpack/hot/only-dev-server',
-  webpackConfig.entry.client
-];
-
-webpackConfig.plugins.push(new LogPlugin(port));
-
-let compiler;
-
-try {
-  compiler = webpack(webpackConfig);
-} catch (err) {
-  console.error(err.message);
-  process.exit(1);
-}
-
-const devMiddleWare = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  logLevel: 'warn',
-  inline: true,
-  headers: {
-    'Access-Control-Allow-Origin': '*',
-    'Access-Control-Allow-Methods': '*',
-    'Access-Control-Allow-Headers': '*'
-  },
-  watchOptions: {
-    aggregateTimeout: 100
-  }
-});
-app.use(devMiddleWare);
-app.use(
-  require('webpack-hot-middleware')(compiler, {
-    log: console.info
-  })
-);
-
-const mfs = devMiddleWare.fileSystem;
-const file = path.join(webpackConfig.output.path, 'index.html');
-
-devMiddleWare.waitUntilValid();
-
-app.get('*', (req, res) => {
-  devMiddleWare.waitUntilValid(() => {
-    const html = mfs.readFileSync(file);
-    res.end(html);
-  });
-});
-
-if (process.env.HTTPS) {
-  let creds = {};
-  try {
-    creds.key = fs.readFileSync(path.resolve(__dirname, 'server.key'), 'utf8');
-  } catch (err) {
-    console.error('Failed to get SSL private key at webpack_config/server.key');
-    console.error(err);
-    process.exit(1);
-  }
-
-  try {
-    creds.cert = fs.readFileSync(path.resolve(__dirname, 'server.crt'), 'utf8');
-  } catch (err) {
-    console.error('Failed to get SSL certificate at webpack_config/server.crt');
-    console.error(err);
-    process.exit(1);
-  }
-
-  const httpsApp = https.createServer(creds, app);
-  httpsApp.listen(port);
-} else {
-  app.listen(port);
-}

webpack_config/makeConfig.js

@@ -15,6 +15,7 @@ const BabelMinifyPlugin = require('babel-minify-webpack-plugin');
 const SriPlugin = require('webpack-subresource-integrity');
 const ClearDistPlugin = require('./plugins/clearDist');
 const SortCachePlugin = require('./plugins/sortCache');
+const ServerLogPlugin = require('./plugins/serverLog');
 
 const config = require('./config');
 
@@ -28,6 +29,7 @@ const DEFAULT_OPTIONS = {
 module.exports = function(opts = {}) {
   const options = Object.assign({}, DEFAULT_OPTIONS, opts);
   const isDownloadable = options.isHTMLBuild || options.isElectronBuild;
+  const port = process.env.HTTPS ? 3443 : 3000;
 
   // ====================
   // ====== Entry =======
@@ -252,7 +254,8 @@ module.exports = function(opts = {}) {
       }),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.NoEmitOnErrorsPlugin(),
-      new FriendlyErrorsPlugin()
+      new FriendlyErrorsPlugin(),
+      new ServerLogPlugin(port)
     );
   }
 
@@ -287,6 +290,21 @@ module.exports = function(opts = {}) {
     }
   }
 
+  // ====================
+  // ===== DevServer ====
+  // ====================
+
+  let devServer = undefined;
+  if (!options.isProduction) {
+    devServer = {
+      port,
+      progress: true,
+      stats: 'minimal',
+      https: !!process.env.HTTPS,
+      historyApiFallback: true
+    };
+  }
+
   // ====================
   // ====== Output ======
   // ====================
@@ -304,6 +322,7 @@ module.exports = function(opts = {}) {
     output,
     module: { rules },
     plugins,
+    devServer,
     target: 'web',
     resolve: config.resolve,
     performance: {