attempt to use webpack-dev-server via node-api -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

package.json

@@ -318,6 +318,7 @@
     "@types/url-parse": "^1.4.5",
     "@types/uuid": "^8.3.3",
     "@types/webpack": "^5.28.0",
+    "@types/webpack-dev-server": "^4.7.2",
     "@types/webpack-env": "^1.16.3",
     "@types/webpack-node-externals": "^2.5.3",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
@@ -383,6 +384,7 @@
     "typescript-plugin-css-modules": "^3.4.0",
     "webpack": "^5.67.0",
     "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.4",
     "webpack-node-externals": "^3.0.0",
     "xterm": "^4.15.0",
     "xterm-addon-fit": "^0.5.0"

src/main/index.ts

@@ -10,7 +10,7 @@ import * as Mobx from "mobx";
 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 } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -55,6 +55,7 @@ import routerInjectable from "./router/router.injectable";
 import shellApiRequestInjectable from "./proxy-functions/shell-api-request/shell-api-request.injectable";
 import userStoreInjectable from "../common/user-store/user-store.injectable";
 import trayMenuItemsInjectable from "./tray/tray-menu-items.injectable";
+import { createDevServer } from "../../webpack.dev-server";
 
 const di = getDi();
 
@@ -177,6 +178,10 @@ di.runSetups().then(() => {
     try {
       logger.info("🔌 Starting LensProxy");
       await lensProxy.listen();
+
+      if (isDevelopment) {
+        await createDevServer(lensProxy.port).start();
+      }
     } catch (error) {
       dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
 

src/main/router.ts

@@ -124,6 +124,21 @@ export class Router {
       }
 
       try {
+        // const filename = path.basename(req.url);
+        // redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
+        // const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
+        //
+        // if (isDevelopment /*&& toWebpackDevServer*/) {
+        //   const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
+        //
+        //   logger.info(`[ROUTER]: redirecting to dev-server url: ${redirectLocation}`);
+        //
+        //   response.statusCode = 307;
+        //   response.setHeader("Location", redirectLocation);
+        //
+        //   return response.end();
+        // }
+
         const data = await readFile(asset);
 
         response.setHeader("Content-Type", getMimeType(asset));

webpack.dev-server.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { webpackLensRenderer } from "./webpack.renderer";
+import { buildDir } from "./src/common/vars";
+
+export function createDevServer(lensProxyPort: number): WebpackDevServer {
+  const config = webpackLensRenderer();
+  const compiler = Webpack(config);
+
+  return new WebpackDevServer({
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    allowedHosts: "all",
+    host: "localhost",
+    // static: buildDir, // aka `devServer.contentBase` in webpack@4
+    hot: true, // enable HMR when supported by modules
+    proxy: {
+      // https://webpack.js.org/configuration/dev-server/#devserverproxy
+      "*": `//:localhost:${lensProxyPort}`,
+      secure: false, // allow http connections
+      changeOrigin: true,
+      context: [buildDir],
+      bypass: function (req, res, proxyOptions) {
+        console.log(`[PROXY]: path ${req.path}`);
+        return null; // continue with proxy, return false for "404"-error
+      },
+    },
+    client: {
+      // don't show warnings and errors on top of rendered app view
+      overlay: false,
+    },
+  }, compiler);
+}

webpack.renderer.ts

@@ -26,7 +26,6 @@ export function webpackLensRenderer(): webpack.Configuration {
   } = vars;
 
   return {
-    context: __dirname,
     target: "electron-renderer",
     name: "lens-app",
     mode: isDevelopment ? "development" : "production",
@@ -116,7 +115,7 @@ export function iconsAndImagesWebpackRules(): webpack.RuleSetRule[] {
     },
     {
       test: /\.(jpg|png|ico)$/,
-      type: "asset/resource", // path to file, e.g. "/static/assets/*"
+      type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
     },
   ];
 }