Run two instances of same Electron app locally at same time

I'm developing a chat application with Electron and would like to run two instances of the same Electron application to run concurrently for debugging purposes.

I used Electron Forge to instantiate the project, which uses port 3000 by default, and attempting to run the same application in another process leads to an address already in use error.

Did some research into this and saw approaches to run the client & application code on different ports, along with how to change the default port on Electron Forge.

I've thought about having the Electron app run on a randomly generated port number to avoid taking up the same port number, but curious whether there's a simpler way to do this.

Error message attached below:

An unhandled exception has occurred inside Forge:
listen EADDRINUSE: address already in use :::3000
Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (node:net:1334:16)
    at listenInCluster (node:net:1382:12)
    at Server.listen (node:net:1469:7)
    at /Users/userabc/src/p2p-tool/src/app/node_modules/webpack-dev-server/lib/Server.js:771:30
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /Users/userabc/src/p2p-tool/src/app/node_modules/@electron-forge/plugin-webpack/src/WebpackPlugin.ts:307:22

Thanks!

Solution

Here's a basic workaround. This is assuming use of the Webpack bundler with Electron Forge. Electron Forge instantiates a devserver by default on port 3000, so we'll want to modify the port number to be able to run more than one app concurrently.

Start the first instance of the Electron app with npm start
In package.json, add a port and loggerPort property within @electron-forge/plugin-webpack to set a custom port and or loggerport. Example shown below. This post goes into more detail on why this works.

    "config": {
        "forge": {
          "packagerConfig": {
            "name": "Electron starter",
            "executableName": "electron-starter",
            "icon": "assets/icon",
            "extraResource": [
              "assets"
            ]
          },
          "plugins": [
            [
              "@electron-forge/plugin-webpack",
              {
                  //Your code goes here to specify a new port and loggerPort
                  "port": "3001",
                  "loggerPort": "9001",
              
                "mainConfig": "./webpack/main.webpack.js",

                //More config options...

In a new process in your terminal, start the same second instance of the Electron app with npm start. This will run on the custom port you specified, while the first instance is still running on port 3000.

This is unwieldy for repeated use, so I welcome better solutions.