fix(plugin-webpack): try other logger ports

packages/plugin/webpack/src/WebpackPlugin.ts

@@ -570,7 +570,7 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
 
     const logger = new Logger(this.loggerPort);
     this.loggers.push(logger);
-    await logger.start();
+    const currLoggerPort = await logger.start();
 
     return {
       tasks: [
@@ -587,7 +587,7 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
           title: 'Launching dev servers for renderer process code',
           task: async (_, task) => {
             await this.launchRendererDevServers(logger);
-            task.output = `Output Available: ${chalk.cyan(`http://localhost:${this.loggerPort}`)}\n`;
+            task.output = `Output Available: ${chalk.cyan(`http://localhost:${currLoggerPort}`)}\n`;
           },
           options: {
             persistentOutput: true,

packages/utils/core-utils/src/index.ts

@@ -1,3 +1,4 @@
 export * from './rebuild';
 export * from './electron-version';
 export * from './yarn-or-npm';
+export * from './port';

packages/utils/core-utils/src/port.ts

@@ -0,0 +1,41 @@
+import http from 'http';
+
+/**
+ * Check if a port is occupied.
+ * @returns boolean promise that resolves to true if the port is available, false otherwise.
+ */
+export const portOccupied = async (port: number): Promise<void> => {
+  return new Promise<void>((resolve, reject) => {
+    const server = http.createServer().listen(port);
+    server.on('listening', () => {
+      server.close();
+      resolve();
+    });
+
+    server.on('error', (error) => {
+      if ('code' in error && (error as NodeJS.ErrnoException).code === 'EADDRINUSE') {
+        reject(new Error(`port: ${port} is occupied`));
+      } else {
+        reject(error);
+      }
+    });
+  });
+};
+
+/**
+ * Find an available port for web UI.
+ * @returns the port number.
+ */
+export const findAvailablePort = async (initialPort: number): Promise<number> => {
+  const maxPort = initialPort + 10;
+
+  for (let p = initialPort; p <= maxPort; p++) {
+    try {
+      await portOccupied(p);
+      return p;
+    } catch (_err) {
+      // Pass
+    }
+  }
+  throw new Error(`Could not find an available port between ${initialPort} and ${maxPort}. Please free up a port and try again.`);
+};

packages/utils/core-utils/test/port_spec.ts

@@ -0,0 +1,68 @@
+import net from 'node:net';
+
+import { expect } from 'chai';
+
+import { findAvailablePort, portOccupied } from '../src/port';
+
+const usePort = (port: number) => {
+  const server = net.createServer();
+  server.on('error', () => {
+    // pass
+  });
+  server.listen(port);
+  return () => {
+    server.close();
+  };
+};
+
+const usePorts = (port: number, endPort: number) => {
+  const releases: ReturnType<typeof usePort>[] = [];
+  for (let i = port; i <= endPort; i++) {
+    releases.push(usePort(i));
+  }
+  return () => {
+    releases.forEach((release) => release());
+  };
+};
+
+describe('Port tests', () => {
+  describe('portOccupied', () => {
+    it('should resolve to true if the port is available', async () => {
+      const port = 49152;
+      const result = await portOccupied(port);
+      expect(result).to.not.throw;
+    });
+    it('should reject if the port is occupied', async () => {
+      const port = 48143;
+      const releasePort = usePort(port);
+      try {
+        await portOccupied(port);
+      } catch (error) {
+        expect((error as Error).message).to.equal(`port: ${port} is occupied`);
+      } finally {
+        releasePort();
+      }
+    });
+  });
+
+  describe('findAvailablePort', () => {
+    it('should find an available port', async () => {
+      const initialPort = 51155;
+      const port = await findAvailablePort(initialPort);
+      expect(port).gte(initialPort);
+    });
+    it('should throw an error if no available port is found', async () => {
+      const initialPort = 53024;
+      const releasePort = usePorts(initialPort, initialPort + 10);
+      try {
+        await findAvailablePort(initialPort);
+      } catch (error) {
+        expect((error as Error).message).to.equal(
+          `Could not find an available port between ${initialPort} and ${initialPort + 10}. Please free up a port and try again.`
+        );
+      } finally {
+        releasePort();
+      }
+    });
+  });
+});

packages/utils/web-multi-logger/package.json

@@ -8,6 +8,7 @@
   "main": "dist/Logger.js",
   "typings": "dist/Logger.d.ts",
   "dependencies": {
+    "@electron-forge/core-utils": "7.3.0",
     "express": "^4.17.1",
     "express-ws": "^5.0.2",
     "xterm": "^4.9.0",

packages/utils/web-multi-logger/src/Logger.ts

@@ -1,6 +1,7 @@
 import http from 'http';
 import path from 'path';
 
+import { findAvailablePort } from '@electron-forge/core-utils';
 import express from 'express';
 import ews from 'express-ws';
 
@@ -33,7 +34,6 @@ export default class Logger {
       // I assume this endpoint is just a no-op needed for some reason.
     });
   }
-
   /**
    * Creates a new tab with the given name, the name should be human readable
    * it will be used as the tab title in the front end.
@@ -49,12 +49,11 @@ export default class Logger {
    *
    * @returns the port number
    */
-  start(): Promise<number> {
-    return new Promise<number>((resolve) => {
-      this.server = this.app.listen(this.port, () => resolve(this.port));
-    });
+  async start(): Promise<number> {
+    this.port = await findAvailablePort(this.port);
+    this.server = this.app.listen(this.port);
+    return this.port;
   }
-
   /**
    * Stop the HTTP server hosting the web UI
    */