Enable HMR through gulp

Vagrantfile

@@ -33,7 +33,6 @@ Vagrant.configure(2) do |config|
   # within the machine from a port on the host machine. In the example below,
   # accessing "localhost:8000" will access port 8000 on the guest machine.
   config.vm.network "forwarded_port", guest: 8000, host: 8000, id: "webserver"
-  config.vm.network "forwarded_port", guest: 3000, host: 3000, id: "webpack"
 
   # Create a private network, which allows host-only access to the machine
   # using a specific IP.

gulpfile.js

@@ -62,9 +62,16 @@ var gulp      = require('gulp'),
   sass        = require('gulp-sass'),
   cleanCSS    = require('gulp-clean-css'),
   touch       = require('gulp-touch-cmd'),
-  webpack     = require('webpack-stream'),
+  webpack     = require('webpack'),
+  webpackStrm = require('webpack-stream'),
+  DevServer   = require('webpack-dev-server'),
   exec        = require('child_process').exec;
 
+
+// Load webpack config
+var webpackDev = () => require(options.theme.app + 'webpack.dev.config.js');
+var webpackProd = () => require(options.theme.app + 'webpack.prod.config.js');
+
 // The sass files to process.
 var sassFiles = [
   options.theme.sass + '**/*.scss',
@@ -166,14 +173,14 @@ gulp.task('scripts:production', gulp.series('clean:js', function js () {
 // Build App.
 gulp.task('app', function() {
     return gulp.src(options.theme.app + 'src/')
-        .pipe(webpack( require(options.theme.app + 'webpack.dev.config.js') ))
+        .pipe(webpackStrm( webpackDev() ))
         .pipe(gulp.dest(options.theme.app_dest));
 })
 
 // Build Prod App
 gulp.task('app:production', function() {
     return gulp.src(options.theme.app + 'src/')
-        .pipe(webpack( require(options.theme.app + 'webpack.prod.config.js') ))
+        .pipe(webpackStrm( webpackProd() ))
         .pipe(gulp.dest(options.theme.app_dest));
 })
 
@@ -225,6 +232,37 @@ gulp.task('watch:static', function watch () {
   return gulp.watch(options.theme.dest + '**/*.*', options.gulpWatchOptions, gulp.series('collectstatic'));
 });
 
+gulp.task('watch:app', function watch (callback) {
+    var webpackOptions = webpackDev();
+
+    webpackOptions.entry.unshift(
+        `webpack-dev-server/client?http://localhost:${webpackOptions.devServer.port}/`,
+        `webpack/hot/dev-server`
+    );
+
+    var serverOptions = Object.assign(
+        {}, webpackOptions.devServer, {
+            publicPath: '/app/',
+            stats: {
+                colors: true,
+                cached: false,
+                cachedAssets: false
+            }
+        }
+    );
+
+    var server = new DevServer(
+        webpack( webpackOptions ),
+        serverOptions
+    )
+
+    server.listen(3000, "localhost", function(err) {
+        if(err) throw new console.PluginError("webpack-dev-server", err);
+        // Server listening
+        console.log("[webpack-dev-server]", "Running");
+    });
+})
+
 gulp.task('watch', gulp.parallel('watch:css', 'watch:lint:sass', 'watch:js', 'watch:lint:js', 'watch:images', 'watch:fonts', 'watch:static'));
 
 // Build everything.

opentech/static_src/src/app/webpack.base.config.js

@@ -3,7 +3,7 @@ var path = require("path")
 module.exports = {
     context: __dirname,
 
-    entry: './src/index',
+    entry: ['./src/index'],
 
     output: {
         filename: "[name]-[hash].js"

opentech/static_src/src/app/webpack.dev.config.js

@@ -17,12 +17,8 @@ config.plugins = config.plugins.concat([
 // Add a loader for JSX files with react-hot enabled
 
 config.devServer = {
-    allowedHosts: [
-        '.localhost',
-    ],
     hotOnly: true,
-    port: 3000,
-    host: '0.0.0.0'
+    port: 3000
 }
 
 config.devtool = 'source-map'