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

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,13 +94,15 @@ export class Router {
     return mimeTypes[path.extname(filename).slice(1)] || "text/plain"
   }
 
-  async handleStaticFile(filePath: string, res: http.ServerResponse, requestpath?: string) {
+  async handleStaticFile(filePath: string, res: http.ServerResponse, requestpath: string, req: http.IncomingMessage) {
     const asset = path.join(__static, filePath);
     try {
-      if (path.basename(requestpath).includes(appName)) {
-        res.writeHead(307,
-          { Location: 'http://localhost:9000' + requestpath }
-        );
+      const filename = path.basename(requestpath);
+      const toWebpackDevServer = filename.includes(appName) || filename.includes('hot-update') || requestpath.includes('sockjs-node')
+      if (isDevelopment && toWebpackDevServer) {
+        const redirectLocation = `http://localhost:${webpackDevServerPort}` + requestpath
+        res.statusCode = 307;
+        res.setHeader('Location', redirectLocation);
         res.end();
         return;
       }
@@ -109,15 +111,17 @@ export class Router {
       res.write(data)
       res.end()
     } catch (err) {
-      this.handleStaticFile(`${publicPath}/${appName}.html`, res);
+      this.handleStaticFile(`${publicPath}/${appName}.html`, res, requestpath, req);
     }
   }
 
   protected addRoutes() {
     // Static assets
-    this.router.add({ method: 'get', path: '/{path*}' }, ({ params, response, path }: LensApiRequest) => {
-      this.handleStaticFile(params.path, response, path);
-    });
+    this.router.add(
+      { method: 'get', path: '/{path*}' },
+      ({ params, response, path, raw: { req }}: LensApiRequest) => {
+        this.handleStaticFile(params.path, response, path, req);
+      });
 
     this.router.add({ method: "get", path: `${apiPrefix}/kubeconfig/service-account/{namespace}/{account}` }, kubeconfigRoute.routeServiceAccountRoute.bind(kubeconfigRoute))
 

webpack.renderer.ts

@@ -1,4 +1,4 @@
-import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars } from "./src/common/vars";
+import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
 import path from "path";
 import webpack from "webpack";
 import HtmlWebpackPlugin from "html-webpack-plugin";
@@ -7,6 +7,7 @@ import TerserPlugin from "terser-webpack-plugin";
 import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin"
 import ProgressBarPlugin from "progress-bar-webpack-plugin";
 import HardSourceWebpackPlugin from 'hard-source-webpack-plugin';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
 
 export default [
   webpackLensRenderer
@@ -22,10 +23,12 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
     devtool: "source-map", // todo: optimize in dev-mode with webpack.SourceMapDevToolPlugin
     devServer: {
       contentBase: buildDir,
-      port: 9000,
+      port: webpackDevServerPort,
       host: "localhost",
       hot: true,
+      // to avoid cors errors when requests is from iframes
       disableHostCheck: true,
+      headers: { 'Access-Control-Allow-Origin': '*' },
     },
     name: "lens-app",
     mode: isProduction ? "production" : "development",
@@ -87,7 +90,11 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
                   ["@babel/preset-env", {
                     modules: "commonjs" // ling-ui
                   }],
-                ]
+                ],
+                plugins: [
+                  // ... other plugins
+                  isDevelopment && require.resolve('react-refresh/babel'),
+                ].filter(Boolean),
               }
             },
             {
@@ -181,7 +188,9 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
         filename: "[name].css",
       }),
 
-      new HardSourceWebpackPlugin()
+      isDevelopment && new HardSourceWebpackPlugin(),
+      isDevelopment && new webpack.HotModuleReplacementPlugin(),
+      isDevelopment && new ReactRefreshWebpackPlugin(),
     ],
   }
 }