Merge pull request #12850 from rtibbles/hot_reload_in_your_local_area…

…_network

Fix write-to-disk option for dev server.

packages/kolibri-tools/lib/cli.js

@@ -85,6 +85,7 @@ function runWebpackBuild(mode, bundleData, devServer, options, cb = null) {
     devServer,
     requireKdsPath: options.requireKdsPath,
     kdsPath: options.kdsPath,
+    setDevServerPublicPath: !options.writeToDisk,
   };
 
   const webpackConfig = require('./webpack.config.plugin');
@@ -130,6 +131,9 @@ function runWebpackBuild(mode, bundleData, devServer, options, cb = null) {
       headers: {
         'Access-Control-Allow-Origin': '*',
       },
+      devMiddleware: {
+        writeToDisk: options.writeToDisk,
+      },
       setupMiddlewares: (middlewares, devServer) => {
         if (!devServer) {
           throw new Error('webpack-dev-server is not defined');
@@ -285,6 +289,10 @@ const buildCommand = program
       cliLogging.error('Can only specify watchonly for dev builds');
       process.exit(1);
     }
+    if (options.writeToDisk && options.hot) {
+      cliLogging.error('Hot module reloading cannot be used with write-to-disk mode.');
+      process.exit(1);
+    }
     if (options.watchonly.length) {
       const unwatchedBundles = [];
       // Watch core for changes if KDS option is provided; all KDS components are linked to core.
@@ -332,7 +340,7 @@ const buildCommand = program
       );
     }
 
-    runWebpackBuild(mode, bundleData, !options.writeToDisk && mode === modes.DEV, options);
+    runWebpackBuild(mode, bundleData, mode === modes.DEV, options);
   });
 
 const ignoreDefaults = ['**/node_modules/**', '**/static/**'];

packages/kolibri-tools/lib/webpack.config.plugin.js

@@ -31,6 +31,7 @@ const WebpackMessages = require('./webpackMessages');
  * @param {boolean} hot - Activate hot module reloading
  * @param {Number} port - port that the dev server is served on
  * @param {string} address - address that the dev server is served on
+ * @param {boolean} setDevServerPublicPath - whether to set the public path for the dev server
  * @returns {Object} bundle - An object defining the webpack config.
  */
 module.exports = (
@@ -44,6 +45,7 @@ module.exports = (
     transpile = false,
     devServer = false,
     kdsPath = '',
+    setDevServerPublicPath = true,
   } = {},
 ) => {
   if (
@@ -191,8 +193,10 @@ module.exports = (
   bundle = merge(bundle, baseConfig({ mode, hot, cache, transpile }), webpackConfig);
 
   if (devServer) {
-    const publicPath = `http://${address}:${port}/${data.name}/`;
-    bundle.output.publicPath = publicPath;
+    if (setDevServerPublicPath) {
+      const publicPath = `http://${address}:${port}/${data.name}/`;
+      bundle.output.publicPath = publicPath;
+    }
     bundle.watch = true;
     bundle.watchOptions = {
       aggregateTimeout: 300,