How to change electron-forge default port?

Question

I can't find reference about this anywhere in their website/docs. I need to change this to another port, currently it's stuck in 3000.

Here's how I create an electron project with electron-forge

yarn create electron-app my-new-app --template=typescript

and whenever there is another service in port 3000. It throws an error:

listen EADDRINUSE :::3000
Error: listen EADDRINUSE :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)

my webpack.main.config.js file:

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules')
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json']
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

Shackle

Answer 1

I just started out using electron-forge and ran into the same issue, and it seemed like the electron/webpack was ignoring my devServer.port value.

After finding this doc for the electron-forge config I realized the devServer.port is probably overwritten by electron-forge, and the values for the config were set in package.json. Here was mine:

{
  "name": "my-project",
  // ...
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        // ...
      ],
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.js",
                  "name": "main_window"
                }
              ]
            },

            // the secret sauce:
            "port": 3001,
            "loggerPort": 9001
          }
        ]
      ]
    }
  }
}

Zygoma

2022: This did the trick, thank you – Lavaliere

does not work for me – Thorazine

Answer 2

Similar to what @ferm10n had for an answer, but I made the change in the root file forge.config.ts instead. A port property that hangs off the WebpackPlugin object.

const config: ForgeConfig = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
  plugins: [
    new AutoUnpackNativesPlugin({}),
    new WebpackPlugin({
      mainConfig,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: './src/index.html',
            js: './src/renderer.ts',
            name: 'main_window',
            preload: {
              js: './src/preload.ts',
            },
          },
        ],
      },
      port: 3050 // <--- CUSTOM PORT
    }),
  ],
};

Naphthol

2023 this works – Caballero

Answer 3

As an update to this question, I was unable to replicate the top-rated answer and eventually changed the default port with a slightly different approach by implementing this answer from another post.

Electron-forge with webpack devServer

Careen

Answer 4

$ PORT=3050 npm run dev works fine

Inerney

Answer 5

Follow instructions here to setup Webpack configuration for your project (if not already done): https://www.electronforge.io/config/plugins/webpack

Then, follow the instructions here to change the devServer.port option: https://webpack.js.org/configuration/dev-server/

Rutter

where is devServer is located? my webpack.main.config.js file doesn't have any, and if I add devServer, it gets ignored by electron. Still running on 3000 – Shackle

It should work when you add devServer and its options. Can you post a copy of your webpack config? – Rutter

OK I added my webpack config – Shackle