feat: try other logger ports

packages/plugin/webpack/src/Config.ts

@@ -151,7 +151,7 @@ export interface WebpackPluginConfig {
    */
   port?: number;
   /**
-   * The TCP port for web-multi-logger. Defaults to 9000.
+   * The TCP port for web-multi-logger. Defaults to 9000. If the specified port is unavailable, the server will attempt to start on ports up to 10 higher (port + 10).
    */
   loggerPort?: number;
   /**

packages/plugin/webpack/src/WebpackPlugin.ts

@@ -597,6 +597,7 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
   }
 
   private alreadyStarted = false;
+
 }
 
 export { WebpackPlugin, WebpackPluginConfig };

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,39 @@
+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<boolean> => {
+  return new Promise<boolean>((resolve, reject) => {
+    const server = http.createServer().listen(port);
+    server.on('listening', () => {
+      server.close();
+      server.on('close', () => {
+        resolve(true);
+      });
+    });
+
+    server.on('error', (_err) => {
+      reject(false);
+    });
+  });
+};
+
+/**
+ * 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).to.equal(false);
+      } 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.4.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,10 +49,10 @@ 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;
   }
 
   /**