Get a basic dev mode working

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

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");