Add webpack hot-reload/cache plugins to improve Lens DX (#1250)

* Add webpack-dev-server (for hot module replacement) to serve statics, add HardSourceWebpackPlugin to improve re-compiling speed

* Serve statics using webpack-dev-server instead of lens-proxy, redirect request of Lens.html/Lens.js to webpack-dev-server

* Add react-refresh-webpack-plugin and its dep for hot-reload

* Add hot-reload plugin, and make proxy redirects requests to webpackdevserver

* Add hard-source webpack plugin to main process

* Remove parameter 'path' of handleStaticFile

* Upgarde webpack to v4 latest stable

* Fix build error: plugins shouldnt be null

Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

src/common/vars.ts

@@ -22,6 +22,7 @@ export const mainDir = path.join(contextDir, "src/main");
 export const rendererDir = path.join(contextDir, "src/renderer");
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
+export const webpackDevServerPort = 9009
 
 // Special runtime paths
 defineGlobal("__static", {

src/main/router.ts

@@ -4,7 +4,7 @@ import http from "http"
 import path from "path"
 import { readFile } from "fs-extra"
 import { Cluster } from "./cluster"
-import { apiPrefix, appName, publicPath } from "../common/vars";
+import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
 import { helmRoute, kubeconfigRoute, metricsRoute, portForwardRoute, resourceApplierRoute, watchRoute } from "./routes";
 
 export interface RouterRequestOpts {
@@ -94,23 +94,35 @@ export class Router {
     return mimeTypes[path.extname(filename).slice(1)] || "text/plain"
   }
 
-  async handleStaticFile(filePath: string, res: http.ServerResponse) {
+  async handleStaticFile(filePath: string, res: http.ServerResponse, req: http.IncomingMessage) {
     const asset = path.join(__static, filePath);
     try {
+      const filename = path.basename(req.url);
+      // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
+      const toWebpackDevServer = filename.includes(appName) || filename.includes('hot-update') || req.url.includes('sockjs-node');
+      if (isDevelopment && toWebpackDevServer) {
+        const redirectLocation = `http://localhost:${webpackDevServerPort}` + req.url;
+        res.statusCode = 307;
+        res.setHeader('Location', redirectLocation);
+        res.end();
+        return;
+      }
       const data = await readFile(asset);
       res.setHeader("Content-Type", this.getMimeType(asset));
-      res.write(data)
-      res.end()
+      res.write(data);
+      res.end();
     } catch (err) {
-      this.handleStaticFile(`${publicPath}/${appName}.html`, res);
+      this.handleStaticFile(`${publicPath}/${appName}.html`, res, req);
     }
   }
 
   protected addRoutes() {
     // Static assets
-    this.router.add({ method: 'get', path: '/{path*}' }, ({ params, response }: LensApiRequest) => {
-      this.handleStaticFile(params.path, response);
-    });
+    this.router.add(
+      { method: 'get', path: '/{path*}' },
+      ({ params, response, path, raw: { req }}: LensApiRequest) => {
+        this.handleStaticFile(params.path, response, req);
+      });
 
     this.router.add({ method: "get", path: `${apiPrefix}/kubeconfig/service-account/{namespace}/{account}` }, kubeconfigRoute.routeServiceAccountRoute.bind(kubeconfigRoute))