feat(build): add webpack hot reloading

closes #15

README.md

@@ -64,7 +64,7 @@ You have to place the file in your [project root](https://nuxtjs.org/api/configu
 
 :information_source: Note that each path in the file (`media_folder` and collections `folder` fields) will be rewritten to prepend nuxt.js [srcDir](https://nuxtjs.org/api/configuration-srcdir/), so please specify each path relative to this folder.
 
-This file can be changed while `nuxt dev` is running, and Netlify CMS will be updated automatically. At the moment, you'll have to refresh your browser window manually after the build is complete.
+This file can be changed while `nuxt dev` is running, and Netlify CMS will be updated automatically.
 
 ## Options
 You can pass options using module options or `netlifyCms` section in `nuxt.config.js`.
@@ -103,7 +103,7 @@ These are of two kinds, [Custom Previews](https://www.netlifycms.org/docs/custom
 
 :information_source: The global variable `CMS` is available to these javascript files to reference the CMS object.
 
-This directory can be changed while `nuxt dev` is running, and Netlify CMS will be updated automatically. At the moment, you'll have to refresh your browser window manually after the build is complete.
+This directory can be changed while `nuxt dev` is running, and Netlify CMS will be updated automatically.
 
 ## CONTRIBUTING
 

lib/hmr.client.js

@@ -0,0 +1,12 @@
+(function() {
+  "use strict";
+  const webpackHotMiddlewareClient = require(`webpack-hot-middleware/client?name=client&reload=true&timeout=3000&dynamicPublicPath=true&path=__webpack_hmr`);
+
+  webpackHotMiddlewareClient.subscribe(function(payload) {
+    if (payload.action === "reload" || payload.reload === true) {
+      window.location.reload();
+    }
+  });
+
+  module.exports = webpackHotMiddlewareClient;
+})();

src/module.js

@@ -6,6 +6,7 @@ import chokidar from "chokidar";
 import pify from "pify";
 import webpack from "webpack";
 import webpackDevMiddleware from "webpack-dev-middleware";
+import webpackHotMiddleware from "webpack-hot-middleware";
 import serveStatic from "serve-static";
 import Debug from "debug";
 
@@ -86,10 +87,23 @@ export default function NetlifyCmsModule(moduleOptions) {
           })
         );
 
+        const netlifyWebpackHotMiddleware = pify(
+          webpackHotMiddleware(netlifyCompiler, {
+            log: false,
+            heartbeat: 1000
+          })
+        );
+
         // Inject to renderer instance
         if (builder.nuxt.renderer) {
           builder.nuxt.renderer.netlifyWebpackDevMiddleware = netlifyWebpackDevMiddleware;
+          builder.nuxt.renderer.netlifyWebpackHotMiddleware = netlifyWebpackHotMiddleware;
         }
+
+        // Stop webpack middleware on nuxt.close()
+        this.nuxt.plugin("close", async () => {
+          await this.nuxt.renderer.netlifyWebpackDevMiddleware.close();
+        });
       }
     });
 
@@ -109,14 +123,12 @@ export default function NetlifyCmsModule(moduleOptions) {
           debug(`requesting url: ${Utils.urlJoin(ADMIN_PATH, req.url)}`);
           await this.nuxt.renderer.netlifyWebpackDevMiddleware(req, res);
         }
+        if (this.nuxt.renderer.netlifyWebpackHotMiddleware) {
+          await this.nuxt.renderer.netlifyWebpackHotMiddleware(req, res);
+        }
       }
     });
 
-    // Stop webpack middleware on nuxt.close()
-    this.nuxt.plugin("close", async () => {
-      await this.nuxt.renderer.netlifyWebpackDevMiddleware.close();
-    });
-
     // Start watching config file
     const patterns = [Utils.r(configManager.cmsConfigFile.fileName)];
 
@@ -128,6 +140,9 @@ export default function NetlifyCmsModule(moduleOptions) {
     const refreshFiles = _.debounce(() => {
       configManager.cmsConfigFile.readFile();
       this.nuxt.renderer.netlifyWebpackDevMiddleware.invalidate();
+      this.nuxt.renderer.netlifyWebpackHotMiddleware.publish({
+        action: "reload"
+      });
     }, 200);
 
     // Watch for src Files

src/webpack.config.js

@@ -14,7 +14,7 @@ export default function webpackNetlifyCmsConfig(
   nuxtOptions,
   moduleConfig
 ) {
-  const ENTRY = resolve(__dirname, "../lib/entry.js");
+  const ENTRY = resolve(__dirname, "../lib/entry");
   const BUILD_DIR = moduleConfig.buildDir;
   const CHUNK_FILENAME = nuxtOptions.build.filenames.chunk;
   const PUBLIC_PATH = Utils.urlJoin(
@@ -25,13 +25,16 @@ export default function webpackNetlifyCmsConfig(
   const PAGE_TITLE = moduleConfig.adminTitle;
   const PAGE_TEMPLATE = resolve(__dirname, "../lib/template", "index.html");
   const REQUIRE_EXTENSIONS = existsSync(EXTENSIONS_DIR) ? true : false;
+  const HMR_CLIENT = resolve(__dirname, "../lib/hmr.client");
 
   const config = {
     name,
-    entry: ENTRY,
+    entry: {
+      app: ENTRY
+    },
     output: {
       path: BUILD_DIR,
-      filename: "bundle.[chunkhash].js",
+      filename: "bundle.[hash].js",
       chunkFilename: CHUNK_FILENAME,
       publicPath: PUBLIC_PATH
     },
@@ -71,7 +74,18 @@ export default function webpackNetlifyCmsConfig(
   // Development specific config
   // --------------------------------------
   if (nuxtOptions.dev) {
+    // Add friendly error plugin
     config.plugins.push(new FriendlyErrorsWebpackPlugin());
+
+    // https://webpack.js.org/plugins/named-modules-plugin
+    config.plugins.push(new webpack.NamedModulesPlugin());
+
+    // Add HMR support
+    config.entry.app = [HMR_CLIENT, config.entry.app];
+    config.plugins.push(
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoEmitOnErrorsPlugin()
+    );
   } else {
     // --------------------------------------
     // Production specific config

test/__snapshots__/dev.test.js.snap

@@ -9,7 +9,7 @@ exports[`module dev mode admin 1`] = `
     <title>Content Manager</title>
   </head>
   <body>
-  <script type=\\"text/javascript\\" src=\\"/admin/bundle.26dd124e81a2a69ff656.js\\"></script></body>
+  <script type=\\"text/javascript\\" src=\\"/admin/bundle.fddebd073208cdcc9e8b.js\\"></script></body>
 </html>
 "
 `;

test/__snapshots__/module.test.js.snap

@@ -9,7 +9,7 @@ exports[`module admin 1`] = `
     <title>Content Manager</title>
   </head>
   <body>
-  <script type=\\"text/javascript\\" src=\\"/admin/bundle.e205c229ca2f50a63bd9.js\\"></script></body>
+  <script type=\\"text/javascript\\" src=\\"/admin/bundle.721d966526a89f3e0347.js\\"></script></body>
 </html>
 "
 `;