Separate dev server from main server

devServer.js

@@ -0,0 +1,60 @@
+import path from 'path';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import nodemon from 'nodemon';
+
+import config from './webpack.dev.config';
+
+
+const MAIN_PORT = 8000;
+const DEV_PORT = 8001;
+
+config.output.publicPath = `http://localhost:${DEV_PORT}/assets/`;
+
+const devServer = new WebpackDevServer(webpack(config), {
+  contentBase: path.resolve(__dirname, 'public'),
+  publicPath: config.output.publicPath,
+
+  hot: true,
+
+  proxy: {
+    "*": `http://localhost:${MAIN_PORT}`
+  },
+  port: DEV_PORT,
+
+  // webpack-dev-middleware options
+  quiet: true,
+  noInfo: false,
+  lazy: false,
+  filename: 'app.js',
+  watchOptions: {
+    aggregateTimeout: 300,
+    poll: 1000
+  },
+  stats: { colors: true }
+});
+
+nodemon({
+  script: 'index.js',
+  execMap: {
+    js: 'babel-node'
+  },
+  ext: 'js',
+  verbose: true,
+  watch: [
+    'src/'
+  ]
+});
+
+nodemon.on('restart', function (files) {
+  console.log('Restarting app due to: ', files);  // eslint-disable-line no-console
+});
+
+devServer.listen(DEV_PORT, 'localhost', function (err) {
+  if (err) {
+    console.error(err);  // eslint-disable-line no-console
+    process.exit(1);
+  }
+
+  console.log(`Dev server listening at http://localhost:${DEV_PORT}`); // eslint-disable-line no-console
+});

package.json

@@ -13,7 +13,7 @@
     "test": "echo \"Preparing test database...\" && babel-node test-helpers/dropDatabase.js && knex --env test migrate:latest && DB_ENV=test mocha test",
     "test-old": "echo \"Preparing test database...\" && knex --env test migrate:rollback && knex --env test migrate:latest && DB_ENV=test mocha test",
     "travis": "eslint *.js src && echo \"Preparing test database...\" && knex --env travis migrate:latest && DB_ENV=travis babel-node ./node_modules/istanbul/lib/cli cover _mocha -- -R spec && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
-    "start": "NODE_ENV=development babel-node --source-maps -- index.js",
+    "start": "NODE_ENV=development API_HOST=http://localhost:8001 babel-node -- devServer.js",
     "docker-start": "knex migrate:latest && NODE_ENV=production npm run webpack:build:prod && NODE_ENV=production babel-node index.js",
     "lint": "eslint *.js src",
     "coverage": "DB_ENV=test babel-node ./node_modules/istanbul/lib/cli cover _mocha -- -R spec",
@@ -41,7 +41,6 @@
     "bcrypt": "^0.8.5",
     "bluebird": "^3.1.1",
     "bookshelf": "^0.9.1",
-    "chokidar": "^1.4.2",
     "crypto": "0.0.3",
     "dynamic-bem-classnames": "^1.0.2",
     "ejs": "^2.3.4",
@@ -123,6 +122,7 @@
     "coveralls": "^2.11.9",
     "css-loader": "^0.23.1",
     "csv": "~1.1.0",
+    "decache": "^3.1.0",
     "enzyme": "^2.3.0",
     "eslint": "^2.10.2",
     "eslint-plugin-react": "^5.1.1",
@@ -132,10 +132,10 @@
     "istanbul": "1.0.0-alpha.2",
     "jsdom": "^7.2.1",
     "json-loader": "^0.5.4",
-    "koa-webpack-dev-middleware": "^1.2.1",
     "less": "^2.6.0",
     "less-loader": "^2.2.2",
     "node-fetch": "^1.3.3",
+    "nodemon": "^1.9.2",
     "ora": "^0.2.0",
     "postcss-loader": "~0.9.1",
     "react-transform-hmr": "^1.0.1",
@@ -150,9 +150,7 @@
     "unexpected-react": "^3.1.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.1.0-beta.1",
-    "webpack-dev-middleware": "^1.6.1",
-    "webpack-hot-middleware": "^2.6.0",
-    "webpack-koa-hot-middleware": "^0.1.2",
+    "webpack-dev-server": "^1.14.1",
     "wikidata-sdk": "~3.0.1"
   }
 }

server.js

@@ -29,7 +29,6 @@ import cors from 'kcors';
 import serve from 'koa-static';
 import bodyParser from 'koa-bodyparser';
 import mount from 'koa-mount';
-import chokidar from 'chokidar';
 import ejs from 'ejs';
 import { promisify } from 'bluebird';
 
@@ -70,48 +69,6 @@ const matchPromisified = promisify(match, { multiArgs: true });
 const templatePath = path.join(__dirname, '/src/views/index.ejs');
 const template = ejs.compile(fs.readFileSync(templatePath, 'utf8'), { filename: templatePath });
 
-if (exec_env === 'development') {
-  const webpackDevMiddleware = require('koa-webpack-dev-middleware');
-  const webpackHotMiddleware = require('webpack-koa-hot-middleware').default;
-  const webpack = require('webpack');
-  const webpackConfig = require('./webpack.dev.config');
-  const compiler = webpack(webpackConfig);
-
-  app.use(convert(webpackDevMiddleware(compiler, {
-    log: console.log, // eslint-disable-line no-console
-    path: '/__webpack_hmr',
-    publicPath: webpackConfig.output.publicPath,
-    stats: {
-      colors: true
-    }
-  })));
-  app.use(convert(webpackHotMiddleware(compiler)));
-
-  // Taken from https://github.com/glenjamin/ultimate-hot-reloading-example/blob/master/server.js
-
-  // Do "hot-reloading" of express stuff on the server
-  // Throw away cached modules and re-require next time
-  // Ensure there's no important state in there!
-  const watcher = chokidar.watch('./src/api');
-  watcher.on('ready', function () {
-    watcher.on('all', function () {
-      console.log('Clearing /src/api/ cache from server'); // eslint-disable-line no-console
-      Object.keys(require.cache).forEach(function (id) {
-        if (/\/src\/api\//.test(id)) delete require.cache[id];
-      });
-    });
-  });
-
-  // Do "hot-reloading" of react stuff on the server
-  // Throw away the cached client modules and let them be re-required next time
-  compiler.plugin('done', function () {
-    console.log('Clearing /src/ cache from server'); // eslint-disable-line no-console
-    Object.keys(require.cache).forEach(function (id) {
-      if (/\/src\//.test(id)) delete require.cache[id];
-    });
-  });
-}
-
 app.use(async (ctx, next) => {
   const { hostname } = parseUrl(API_HOST);
 

webpack.dev.config.js

@@ -6,7 +6,8 @@ module.exports = {
   cache: true,
 
   entry: [
-    'webpack-hot-middleware/client?path=/__webpack_hmr',
+    'webpack-dev-server/client?http://localhost:8001/',
+    'webpack/hot/dev-server',
     'babel-polyfill',
     './src/scripts/app.js',
     './src/less/styles.less'