Webpack quality of life improvements for dev mode (#4980)

src/main/index.ts

@@ -7,10 +7,11 @@
 
 import { injectSystemCAs } from "../common/system-ca";
 import * as Mobx from "mobx";
+import httpProxy from "http-proxy";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -164,7 +165,7 @@ di.runSetups().then(() => {
     const router = di.inject(routerInjectable);
     const shellApiRequest = di.inject(shellApiRequestInjectable);
 
-    const lensProxy = LensProxy.createInstance(router, {
+    const lensProxy = LensProxy.createInstance(router, httpProxy.createProxy(), {
       getClusterForRequest: (req) => ClusterManager.getInstance().getClusterForRequest(req),
       kubeApiRequest,
       shellApiRequest,
@@ -227,16 +228,6 @@ di.runSetups().then(() => {
 
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
-
-    // Override main content view url to local webpack-dev-server to support HMR / live-reload
-    if (isDevelopment) {
-      const { createDevServer } = await import("../../webpack.dev-server");
-      const devServer = createDevServer(lensProxy.port);
-
-      await devServer.start();
-      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
-    }
-
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

src/main/lens-proxy.ts

@@ -6,7 +6,7 @@
 import type net from "net";
 import type http from "http";
 import spdy from "spdy";
-import httpProxy from "http-proxy";
+import type httpProxy from "http-proxy";
 import { apiPrefix, apiKubePrefix } from "../common/vars";
 import type { Router } from "./router";
 import type { ContextHandler } from "./context-handler/context-handler";
@@ -57,14 +57,15 @@ export class LensProxy extends Singleton {
   protected proxyServer: http.Server;
   protected closed = false;
   protected retryCounters = new Map<string, number>();
-  protected proxy = this.createProxy();
   protected getClusterForRequest: GetClusterForRequest;
 
   public port: number;
 
-  constructor(protected router: Router, { shellApiRequest, kubeApiRequest, getClusterForRequest }: LensProxyFunctions) {
+  constructor(protected router: Router, protected proxy: httpProxy, { shellApiRequest, kubeApiRequest, getClusterForRequest }: LensProxyFunctions) {
     super();
 
+    this.configureProxy(proxy);
+
     this.getClusterForRequest = getClusterForRequest;
 
     this.proxyServer = spdy.createServer({
@@ -82,7 +83,9 @@ export class LensProxy extends Singleton {
         const cluster = getClusterForRequest(req);
 
         if (!cluster) {
-          return void logger.error(`[LENS-PROXY]: Could not find cluster for upgrade request from url=${req.url}`);
+          logger.error(`[LENS-PROXY]: Could not find cluster for upgrade request from url=${req.url}`);
+          
+          return socket.destroy();
         }
 
         const reqHandler = isInternal ? shellApiRequest : kubeApiRequest;
@@ -163,9 +166,7 @@ export class LensProxy extends Singleton {
     this.closed = true;
   }
 
-  protected createProxy(): httpProxy {
-    const proxy = httpProxy.createProxyServer();
-
+  protected configureProxy(proxy: httpProxy): httpProxy {
     proxy.on("proxyRes", (proxyRes, req, res) => {
       const retryCounterId = this.getRequestId(req);
 

src/main/router.ts

@@ -6,6 +6,7 @@
 import Call from "@hapi/call";
 import Subtext from "@hapi/subtext";
 import type http from "http";
+import type httpProxy from "http-proxy";
 import path from "path";
 import { readFile } from "fs-extra";
 import type { Cluster } from "../common/cluster/cluster";
@@ -40,6 +41,7 @@ export interface LensApiRequest<P = any> {
   query: URLSearchParams;
   raw: {
     req: http.IncomingMessage;
+    res: http.ServerResponse;
   };
 }
 
@@ -62,6 +64,7 @@ function getMimeType(filename: string) {
 
 interface Dependencies {
   routePortForward: (request: LensApiRequest) => Promise<void>;
+  httpProxy?: httpProxy;
 }
 
 export class Router {
@@ -101,7 +104,7 @@ export class Router {
       cluster,
       path: url.pathname,
       raw: {
-        req,
+        req, res,
       },
       response: res,
       query: url.searchParams,
@@ -140,12 +143,26 @@ export class Router {
         filePath = `${publicPath}/${appName}.html`;
       }
     }
-
   }
 
   protected addRoutes() {
     // Static assets
-    this.router.add({ method: "get", path: "/{path*}" }, Router.handleStaticFile);
+    if (this.dependencies.httpProxy) {
+      this.router.add({ method: "get", path: "/{path*}" }, (apiReq: LensApiRequest) => {
+        const { req, res } = apiReq.raw;
+
+        if (req.url === "/" || !req.url.startsWith("/build/")) {
+          req.url = `${publicPath}/${appName}.html`;
+        }
+
+        this.dependencies.httpProxy.web(req, res, {
+          target: "http://127.0.0.1:8080",
+        });
+      });
+    } else {
+      this.router.add({ method: "get", path: "/{path*}" }, Router.handleStaticFile);
+    }
+    
 
     this.router.add({ method: "get", path: "/version" }, VersionRoute.getVersion);
     this.router.add({ method: "get", path: `${apiPrefix}/kubeconfig/service-account/{namespace}/{account}` }, KubeconfigRoute.routeServiceAccountRoute);

src/main/router/router.injectable.ts

@@ -3,6 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
+import isDevelopmentInjectable from "../../common/vars/is-development.injectable";
+import httpProxy from "http-proxy";
 import { Router } from "../router";
 import routePortForwardInjectable
   from "../routes/port-forward/route-port-forward/route-port-forward.injectable";
@@ -10,9 +12,15 @@ import routePortForwardInjectable
 const routerInjectable = getInjectable({
   id: "router",
 
-  instantiate: (di) => new Router({
-    routePortForward: di.inject(routePortForwardInjectable),
-  }),
+  instantiate: (di) => {
+    const isDevelopment = di.inject(isDevelopmentInjectable);
+    const proxy = isDevelopment ? httpProxy.createProxy() : undefined;
+
+    return new Router({
+      routePortForward: di.inject(routePortForwardInjectable),
+      httpProxy: proxy,
+    });
+  },
 });
 
 export default routerInjectable;