Change the default Port for a create-react-app project

Change the default Port for a create-react-app project #

To change the default port for a create-react-app project, update the start command in your package.json file to specify the port, e.g. "PORT=3456 react-scripts start" on macOS and Linux and "set PORT=3456 && react-scripts start" on Windows.

Here is how to set the PORT for your project if you are on macOS or Linux.

Copied!
{
  "scripts": {
    "start": "PORT=3456 react-scripts start",
  },
}

And here is how to do the same on Windows.

Copied!
{
  "scripts": {
    "start": "set PORT=3456 && react-scripts start",
  },
}

Alternatively, you can create a .env file in the root directory (where your package.json file is) of your project.

Copied!
# 👇️ default port for create-react-app
PORT=3456

If you set the PORT environment variable in a .env file you don't have to change your start command.

Alternatively, you can use the cross-env package to set a command in your package.json file that would work on macOS, Linux and Windows.

Open your terminal in your project's root directory and install the package:

Copied!
# 👇️ with NPM
npm install --save-dev cross-env

# ----------------------------------------------

# 👇️ with YARN
yarn add cross-env --dev

And update the start command in your package.json file.

Copied!
{
  "scripts": {
    "start": "cross-env PORT=3456 react-scripts start",
  }
}

Using the cross-env package to change the default port makes the command work on macOS, Linux and Windows.