Get a basic dev mode working

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/package.json

@@ -291,7 +291,7 @@
     "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^3.4.0",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",

packages/core/src/main/routes/files/development.injectable.ts

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import httpProxy from "http-proxy";
-import { webpackDevServerPort } from "../../../../webpack/vars";
-import { publicPath } from "../../../common/vars";
-import type { LensApiRequest, RouteResponse } from "../../router/route";
-
-const devStaticFileRouteHandlerInjectable = getInjectable({
-  id: "dev-static-file-route-handler",
-  instantiate: () => {
-    const proxy = httpProxy.createProxy();
-    const proxyTarget = `http://127.0.0.1:${webpackDevServerPort}`;
-
-    return async ({ raw: { req, res }}: LensApiRequest<"/{path*}">): Promise<RouteResponse<Buffer>> => {
-      if (req.url === "/" || !req.url || !req.url.startsWith(publicPath)) {
-        req.url = `${publicPath}/index.html`;
-      }
-
-      proxy.web(req, res, { target: proxyTarget });
-
-      return { proxy };
-    };
-  },
-});
-
-export default devStaticFileRouteHandlerInjectable;

packages/core/src/main/routes/files/route-handler.injectable.ts

@@ -13,8 +13,8 @@ import { contentTypes } from "../../router/router-content-types";
 import loggerInjectable from "../../../common/logger.injectable";
 import { publicPath } from "../../../common/vars";
 
-const prodStaticFileRouteHandlerInjectable = getInjectable({
-  id: "prod-static-file-route-handler",
+const staticFileRouteHandlerInjectable = getInjectable({
+  id: "tatic-file-route-handler",
   instantiate: (di) => {
     const readFileBuffer = di.inject(readFileBufferInjectable);
     const joinPaths = di.inject(joinPathsInjectable);
@@ -56,4 +56,4 @@ const prodStaticFileRouteHandlerInjectable = getInjectable({
   },
 });
 
-export default prodStaticFileRouteHandlerInjectable;
+export default staticFileRouteHandlerInjectable;

packages/core/src/main/routes/files/static-file-route.injectable.ts

@@ -3,26 +3,16 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getRouteInjectable } from "../../router/router.injectable";
-import isDevelopmentInjectable from "../../../common/vars/is-development.injectable";
 import { route } from "../../router/route";
-import prodStaticFileRouteHandlerInjectable from "./production.injectable";
-import devStaticFileRouteHandlerInjectable from "./development.injectable";
+import staticFileRouteHandlerInjectable from "./route-handler.injectable";
 
 const staticFileRouteInjectable = getRouteInjectable({
   id: "static-file-route",
 
-  instantiate: (di) => {
-    const isDevelopment = di.inject(isDevelopmentInjectable);
-
-    return route({
-      method: "get",
-      path: `/{path*}`,
-    })(
-      isDevelopment
-        ? di.inject(devStaticFileRouteHandlerInjectable)
-        : di.inject(prodStaticFileRouteHandlerInjectable),
-    );
-  },
+  instantiate: (di) => route({
+    method: "get",
+    path: `/{path*}`,
+  })(di.inject(staticFileRouteHandlerInjectable)),
 });
 
 export default staticFileRouteInjectable;

packages/core/webpack/vars.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import assert from "assert";
 import path from "path";
 import packageInfo from "../package.json";
 
@@ -20,6 +19,3 @@ export const appName = isDevelopment
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const publicPath = "/build/";
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
-export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
-
-assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");

packages/extension-api/package.json

@@ -44,7 +44,7 @@
     "typedoc-plugin-markdown": "^3.13.6",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/infrastructure/webpack/package.json

@@ -30,7 +30,7 @@
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.1",
-    "webpack": "^5.76.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^3.0.0"
   }

packages/legacy-extension-example/package.json

@@ -40,7 +40,7 @@
     "@k8slens/extensions": "^6.5.0-alpha.3",
     "@types/node": "^16.18.16",
     "typescript": "^4.9.5",
-    "webpack": "^5.76.1",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/node-fetch/package.json

@@ -29,7 +29,7 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1"
   }
 }

packages/open-lens/package.json

@@ -28,10 +28,10 @@
     "build:dir": "npm run compile && electron-builder --dir",
     "compile": "cross-env NODE_ENV=production webpack --config webpack/webpack.ts --progress",
     "postcompile": "npm run build:tray-icons && npm run download:binaries",
-    "dev": "concurrently -i -k \"npm run dev-run -C\" npm:dev:*",
+    "dev": "npm run dev:main && npm run dev:renderer",
     "dev-run": "nodemon --watch ./static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
-    "dev:main": "cross-env NODE_ENV=development webpack --config webpack/main.ts --progress --watch",
-    "dev:renderer": "cross-env NODE_ENV=development ts-node ./webpack/dev-server.ts",
+    "dev:main": "cross-env NODE_ENV=development webpack --config webpack/main.ts --progress",
+    "dev:renderer": "cross-env NODE_ENV=development webpack --config webpack/renderer.ts --progress",
     "test:integration": "jest -xyz --runInBand --detectOpenHandles --forceExit --modulePaths=[\"<rootDir>/integration/\"];",
     "build:tray-icons": "generate-tray-icons --output ./static/build/tray --input ../../node_modules/@k8slens/core/src/renderer/components/icon/logo-lens.svg --notice-icon ../../node_modules/@k8slens/core/src/renderer/components/icon/notice.svg --spinner-icon ../../node_modules/@k8slens/core/src/renderer/components/icon/arrow-spinner.svg",
     "download:binaries": "ensure-binaries --package ./package.json --base-dir ./binaries/client",
@@ -257,7 +257,7 @@
     "typed-emitter": "^1.4.0",
     "typescript": "^4.9.5",
     "typescript-plugin-css-modules": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.77.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0",

packages/open-lens/webpack/dev-server.ts

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import Webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
-import renderer from "./renderer";
-import { buildDir, webpackDevServerPort } from "./vars";
-
-/**
- * API docs:
- * @url https://webpack.js.org/configuration/dev-server/
- * @url https://github.com/chimurai/http-proxy-middleware
- */
-const compiler = Webpack(renderer);
-
-const server = new WebpackDevServer({
-  setupExitSignals: true,
-  headers: {
-    "Access-Control-Allow-Origin": "*",
-  },
-  allowedHosts: ".lens.app",
-  host: "localhost",
-  port: webpackDevServerPort,
-  static: buildDir, // aka `devServer.contentBase` in webpack@4
-  hot: "only", // use HMR only without errors
-  liveReload: false,
-  devMiddleware: {
-    writeToDisk: true,
-    index: "index.html",
-    publicPath: "/build",
-  },
-  proxy: {
-    "^/$": "/build/",
-  },
-  client: {
-    overlay: false, // don't show warnings and errors on top of rendered app view
-    logging: "error",
-  },
-}, compiler);
-
-console.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
-
-server.start();

packages/open-lens/webpack/renderer.ts

@@ -7,7 +7,6 @@
  import type webpack from "webpack";
  import HtmlWebpackPlugin from "html-webpack-plugin";
  import MiniCssExtractPlugin from "mini-css-extract-plugin";
- import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
  import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
  import CircularDependencyPlugin from "circular-dependency-plugin";
  import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
@@ -84,7 +83,6 @@
       CONTEXT_MATCHER_FOR_NON_FEATURES: `/\\.injectable(\\.${platform})?\\.tsx?$/`,
       CONTEXT_MATCHER_FOR_FEATURES: `/\\/(renderer|common)\\/.+\\.injectable(\\.${platform})?\\.tsx?$/`,
     }),
-    new ForkTsCheckerPlugin(),
 
     // see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
     new MonacoWebpackPlugin({

packages/open-lens/webpack/vars.ts

@@ -3,7 +3,6 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import assert from "assert";
 import path from "path";
 
 export const isDevelopment = process.env.NODE_ENV !== "production";
@@ -12,10 +11,7 @@ export const buildDir = path.join(process.cwd(), "static", "build");
 export const assetsFolderName = "assets";
 export const rendererDir = path.join(process.cwd(), "src", "renderer");
 export const publicPath = "/build/";
-export const webpackDevServerPort = Number(process.env.WEBPACK_DEV_SERVER_PORT) || 9191;
 
 // TODO: Figure out a way to access these without relative paths
 export const htmlTemplate = path.resolve(__dirname, "..", "..", "..", "node_modules", "@k8slens", "core", "src/renderer", "template.html");
 export const sassCommonVars = path.resolve(__dirname, "..", "..", "..", "node_modules", "@k8slens", "core", "src", "renderer", "components/vars.scss");
-
-assert(Number.isInteger(webpackDevServerPort), "WEBPACK_DEV_SERVER_PORT environment variable must only be an integer");