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

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

src/main/index.ts

@@ -178,10 +178,6 @@ 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"}`);
 
@@ -233,6 +229,12 @@ di.runSetups().then(() => {
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
 
+    if (isDevelopment) {
+      const devServer = createDevServer(lensProxy.port);
+      await devServer.start(); // waiting dev-server to start
+      windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
+    }
+
     const menuItems = di.inject(electronMenuItemsInjectable);
     const trayMenuItems = di.inject(trayMenuItemsInjectable);
 

src/main/router.ts

@@ -124,21 +124,6 @@ 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));

src/main/window-manager.ts

@@ -34,6 +34,7 @@ export class WindowManager extends Singleton {
   protected disposers: Record<string, Function> = {};
 
   @observable activeClusterId: ClusterId;
+  @observable mainContentUrl = `http://localhost:${LensProxy.getInstance().port}`;
 
   constructor() {
     super();
@@ -41,10 +42,6 @@ export class WindowManager extends Singleton {
     this.bindEvents();
   }
 
-  get mainUrl() {
-    return `http://localhost:${LensProxy.getInstance().port}`;
-  }
-
   private async initMainWindow(showSplash: boolean) {
     // Manage main window size and position with state persistence
     if (!this.windowState) {
@@ -142,8 +139,8 @@ export class WindowManager extends Singleton {
 
     try {
       if (showSplash) await this.showSplash();
-      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
-      await this.mainWindow.loadURL(this.mainUrl);
+      logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainContentUrl} ...`);
+      await this.mainWindow.loadURL(this.mainContentUrl);
     } catch (error) {
       logger.error("Loading main window failed", { error });
       dialog.showErrorBox("ERROR!", error.toString());

webpack.dev-server.ts

@@ -18,18 +18,19 @@ export function createDevServer(lensProxyPort: number): WebpackDevServer {
     },
     allowedHosts: "all",
     host: "localhost",
-    // static: buildDir, // aka `devServer.contentBase` in webpack@4
-    hot: true, // enable HMR when supported by modules
+    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
-      "*": `//: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
-      },
+      '*': {
+        // https://webpack.js.org/configuration/dev-server/#devserverproxy
+        target: `http://localhost:${lensProxyPort}`,
+        secure: false, // allow http connections
+        changeOrigin: true,
+        bypass: function (req, res, proxyOptions) {
+          // console.log(`[PROXY]: path bypass ${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

webpack.renderer.ts

@@ -29,7 +29,7 @@ export function webpackLensRenderer(): webpack.Configuration {
     target: "electron-renderer",
     name: "lens-app",
     mode: isDevelopment ? "development" : "production",
-    devtool: isDevelopment ? "eval-cheap-source-map" : "source-map",
+    devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
     cache: isDevelopment,
     entry: {
       [appName]: path.resolve(rendererDir, "bootstrap.tsx"),