attempt to fix: "Uncaught (in promise) DOMException: A network error occurred." when loading cluster frame -- part 1

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

src/common/vars.ts

@@ -38,6 +38,7 @@ export const mainDir = path.join(contextDir, "src/main");
 export const rendererDir = path.join(contextDir, "src/renderer");
 export const htmlTemplate = path.resolve(rendererDir, "template.html");
 export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
+export const webpackDevServerPort = 9009;
 
 // Special runtime paths
 defineGlobal("__static", {

webpack.dev-server.ts

@@ -6,30 +6,40 @@
 import Webpack from "webpack";
 import WebpackDevServer from "webpack-dev-server";
 import { webpackLensRenderer } from "./webpack.renderer";
-import { buildDir } from "./src/common/vars";
+import { buildDir, webpackDevServerPort } from "./src/common/vars";
+import logger from "./src/common/logger";
+import { getClusterIdFromHost } from "./src/common/utils";
 
+/**
+ * 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): WebpackDevServer {
   const config = webpackLensRenderer();
   const compiler = Webpack(config);
 
-  return new WebpackDevServer({
+  const server = new WebpackDevServer({
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
     allowedHosts: "all",
     host: "localhost",
+    port: webpackDevServerPort,
     static: buildDir, // aka `devServer.contentBase` in webpack@4
     hot: true, // enable HMR when supported by modules or page refresh by default {liveReload:true}
     proxy: {
       '*': {
-        // https://webpack.js.org/configuration/dev-server/#devserverproxy
+        router(req) {
-        target: `http://localhost:${lensProxyPort}`,
+          logger.info(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
-        secure: false, // allow http connections
+
-        changeOrigin: true,
+          const clusterId = getClusterIdFromHost(req.headers.host);
-        bypass: function (req, res, proxyOptions) {
+          if (clusterId) {
-          // console.log(`[PROXY]: path bypass ${req.path}`);
+            return `http://${clusterId}.localhost:${lensProxyPort}`;
-          return null; // continue with proxy, return false for "404"-error
+          }
+
+          return `http://localhost:${lensProxyPort}`;
         },
+        secure: false, // allow http connections
+        logLevel: "debug",
       }
     },
     client: {
@@ -37,4 +47,8 @@ export function createDevServer(lensProxyPort: number): WebpackDevServer {
       logging: "error",
     },
   }, compiler);
+
+  logger.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
+
+  return server;
 }