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

Makefile

@@ -23,16 +23,14 @@ node_modules: yarn.lock
 binaries/client: node_modules
 	yarn download-bins
 
-static/build/LensDev.html: node_modules
-	yarn compile:renderer
-
 .PHONY: compile-dev
 compile-dev: node_modules
 	yarn compile:main --cache
 	yarn compile:renderer --cache
 
 .PHONY: dev
-dev: binaries/client build-extensions static/build/LensDev.html
+dev: binaries/client build-extensions
+	rm -rf static/build/
 	yarn dev
 
 .PHONY: lint
@@ -62,10 +60,11 @@ ifeq "$(DETECTED_OS)" "Windows"
 endif
 	yarn run electron-builder --publish onTag $(ELECTRON_BUILDER_EXTRA_ARGS)
 
+.NOTPARALLEL: $(extension_node_modules)
 $(extension_node_modules): node_modules
-	cd $(@:/node_modules=) && ../../node_modules/.bin/npm install --no-audit --no-fund
+	cd $(@:/node_modules=) && ../../node_modules/.bin/npm install --no-audit --no-fund --no-save
 
-$(extension_dists): src/extensions/npm/extensions/dist
+$(extension_dists): src/extensions/npm/extensions/dist $(extension_node_modules)
 	cd $(@:/dist=) && ../../node_modules/.bin/npm run build
 
 .PHONY: clean-old-extensions
@@ -73,7 +72,7 @@ clean-old-extensions:
 	find ./extensions -mindepth 1 -maxdepth 1 -type d '!' -exec test -e '{}/package.json' \; -exec rm -rf {} \;
 
 .PHONY: build-extensions
-build-extensions: node_modules clean-old-extensions $(extension_node_modules) $(extension_dists)
+build-extensions: node_modules clean-old-extensions $(extension_dists)
 
 .PHONY: test-extensions
 test-extensions: $(extension_node_modules)

extensions/kube-object-event-status/package.json

@@ -8,18 +8,15 @@
     "styles": []
   },
   "scripts": {
-    "build": "webpack && npm pack",
-    "dev": "webpack --watch",
+    "build": "npx webpack && npm pack",
+    "dev": "npx webpack -- --watch",
     "test": "echo NO TESTS"
   },
   "files": [
     "dist/**/*"
   ],
-  "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest"
+    "npm": "^8.5.3"
   }
 }

extensions/metrics-cluster-feature/package.json

@@ -8,9 +8,9 @@
     "styles": []
   },
   "scripts": {
-    "build": "webpack && npm pack",
-    "dev": "webpack --watch",
-    "test": "jest --passWithNoTests --env=jsdom src $@",
+    "build": "npx webpack && npm pack",
+    "dev": "npx webpack -- --watch",
+    "test": "npx jest --passWithNoTests --env=jsdom src $@",
     "clean": "rm -rf dist/ && rm *.tgz"
   },
   "files": [
@@ -19,10 +19,7 @@
   ],
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "semver": "^7.3.2",
-    "jest": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest"
+    "npm": "^8.5.3",
+    "semver": "^7.3.2"
   }
 }

extensions/node-menu/package.json

@@ -8,9 +8,9 @@
     "styles": []
   },
   "scripts": {
-    "build": "webpack && npm pack",
-    "dev": "webpack --watch",
-    "test": "jest --passWithNoTests --env=jsdom src $@"
+    "build": "npx webpack && npm pack",
+    "dev": "npx webpack -- --watch",
+    "test": "npx jest --passWithNoTests --env=jsdom src $@"
   },
   "files": [
     "dist/**/*"
@@ -18,9 +18,6 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest"
+    "npm": "^8.5.3"
   }
 }

extensions/pod-menu/package.json

@@ -8,9 +8,9 @@
     "styles": []
   },
   "scripts": {
-    "build": "webpack && npm pack",
-    "dev": "webpack --watch",
-    "test": "jest --passWithNoTests --env=jsdom src $@"
+    "build": "npx webpack && npm pack",
+    "dev": "npx webpack -- --watch",
+    "test": "npx jest --passWithNoTests --env=jsdom src $@"
   },
   "files": [
     "dist/**/*"
@@ -18,9 +18,6 @@
   "dependencies": {},
   "devDependencies": {
     "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
-    "jest": "latest",
-    "ts-loader": "latest",
-    "typescript": "latest",
-    "webpack": "latest"
+    "npm": "^8.5.3"
   }
 }

package.json

@@ -15,10 +15,9 @@
     "dev": "concurrently -i -k \"yarn run dev-run -C\" yarn:dev:*",
     "dev-build": "concurrently yarn:compile:*",
     "debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
-    "dev-run": "nodemon --watch static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
+    "dev-run": "nodemon --watch ./static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
     "dev:main": "yarn run compile:main --watch --progress",
-    "dev:renderer": "yarn run compile:renderer --watch --progress",
-    "dev:extension-types": "yarn run compile:extension-types --watch --progress",
+    "dev:renderer": "yarn run ts-node webpack.dev-server.ts",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "yarn run webpack --config webpack.main.ts",
     "compile:renderer": "yarn run webpack --config webpack.renderer.ts",

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
+    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({
+  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;

webpack.dev-server.ts

@@ -9,20 +9,18 @@ import { webpackLensRenderer } from "./webpack.renderer";
 import { buildDir } from "./src/common/vars";
 import logger from "./src/common/logger";
 
-export interface DevServer extends WebpackDevServer {
-}
-
 /**
  * Creates `webpack-dev-server`
  * API docs:
  * @url https://webpack.js.org/configuration/dev-server/
  * @url https://github.com/chimurai/http-proxy-middleware
  */
-export function createDevServer(lensProxyPort: number): DevServer {
+function createDevServer(): WebpackDevServer {
   const config = webpackLensRenderer({ showVars: false });
   const compiler = Webpack(config);
 
   const server = new WebpackDevServer({
+    setupExitSignals: true,
     headers: {
       "Access-Control-Allow-Origin": "*",
     },
@@ -31,17 +29,13 @@ export function createDevServer(lensProxyPort: number): DevServer {
     static: buildDir, // aka `devServer.contentBase` in webpack@4
     hot: "only", // use HMR only without errors
     liveReload: false,
+    devMiddleware: {
+      writeToDisk: false,
+      index: "OpenLensDev.html",
+      publicPath: "/build",
+    },
     proxy: {
-      "*": {
-        router(req) {
-          logger.silly(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
-
-          return `http://localhost:${lensProxyPort}`;
-        },
-        secure: false, // allow http connections
-        ws: true, // proxy websockets, e.g. terminal
-        logLevel: "error",
-      },
+      "^/$": "/build/",
     },
     client: {
       overlay: false, // don't show warnings and errors on top of rendered app view
@@ -53,3 +47,7 @@ export function createDevServer(lensProxyPort: number): DevServer {
 
   return server;
 }
+
+const server = createDevServer();
+
+server.start();

webpack.main.ts

@@ -19,11 +19,12 @@ configs.push((): webpack.Configuration => {
   const { mainDir, buildDir, isDevelopment } = vars;
 
   return {
+    name: "lens-app-main",
     context: __dirname,
     target: "electron-main",
     mode: isDevelopment ? "development" : "production",
     devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-    cache: isDevelopment,
+    cache: isDevelopment ? { type: "filesystem" } : false,
     entry: {
       main: path.resolve(mainDir, "index.ts"),
     },
@@ -49,7 +50,6 @@ configs.push((): webpack.Configuration => {
     },
     plugins: [
       new ForkTsCheckerPlugin(),
-
       new CircularDependencyPlugin({
         cwd: __dirname,
         exclude: /node_modules/,

webpack.renderer.ts

@@ -24,11 +24,11 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
 
   return {
     target: "electron-renderer",
-    name: "lens-app",
+    name: "lens-app-renderer",
     mode: isDevelopment ? "development" : "production",
     // https://webpack.js.org/configuration/devtool/ (see description of each option)
     devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
-    cache: isDevelopment,
+    cache: isDevelopment ? { type: "filesystem" } : false,
     entry: {
       [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
     },