React-app-rewired: Change devServer port

[vitorcamachoo]

I'd like to change webpack dev server port on config-overrides files since I don't want to pollute our package.json file.
I've tried using the following configuration without success:

module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.port = 9000;
      return config;
    };
  },
}

[dawnmist]

You don't need to use react-app-rewired to set the port - simply set the PORT variable in your .env file, as specified in create-react-app's advanced configuration.

[vitorcamachoo]

I need this feature, because I want to programatically set port to my application based on create-react-application.

[dawnmist]

You already can through create-react-app. This feature is available by setting the PORT environment variable as stated above.

[vitorcamachoo]

@dawnmist Thanks for the help, but the thing is, I have multiple _cra_ applications working in a workspace and I have a .env file in the root, and every application don't read that file by default so I want to add that logic in a custom config-override and set the port programatically.
I hope you understand what I'm trying to do in my project.

[dawnmist]

@vitorcamachoo Take a look at cross-env which lets you set environment variables on the command line so that they will work regardless of whether you're working in Windows/Linux/MacOS, and then create start scripts for each environment where the script sets the PORT variable as needed for that particular environment.

As an example:

{
  "scripts": {
    "start:prog1": "cross-env PORT='2999' react-scripts start",
    "start:prog2": "cross-env PORT='4000' react-scripts start"
  }
}

Change the "react-scripts start" part with however you're running the individual applications - the main part is simply setting the correct port for each one as part of the command you run when you're starting it. That lets each application reliably have its own port. If you're only using Linux/MacOS, you won't need to use cross-env - that's mainly for compatibility with setting variables in Windows too since otherwise the syntax in Windows is a little different.

[vitorcamachoo]

@dawnmist
I already use that package to be able to run on MacOs and Windows. But what I'm trying to do is.
I have an .env file with:

APP1_PORT=3000
APP2_PORT=3001

and on APP1 I have on package.json

 "scripts": {
    "start": "cross-env PORT=${APP1_PORT-3000} react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

and on APP2:

```json
 "scripts": {
    "start": "cross-env PORT=${APP2_PORT-3000} react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

And I would like to extract that logic into config-overrides.

The thing is, when I run on containers, using docker-compose, I can access .env easily and set the PORT the way I want. But when I run locally, the cra don't load .env because its out of his directory.

[dawnmist]

@vitorcamachoo it's not possible.

The problem is that create-react-app explicitly _ignore/override_ the port setting in the devServer config. See the source for how port gets set by CRA here and choosePort here. The part we can alter is the return from createDevServerConfig on lines 131-134, but CRA _do not use the port setting_ from the generated config.

Using the PORT environment variable is the correct/only way to override the default CRA port calculations.