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:

For example, "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.

package.json

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

And here is how to do the same on Windows.

package.json

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

The code for this article is available on GitHub

Now when you run the npm start command, your React application will start on port 3456.

# Change the default Port using a `.env` file

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

.env

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.

change default port env file

# Change the default Port using the `cross-env` package

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:

shell

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

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

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

npm install cross env

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

package.json

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

change react port cross env

The code for this article is available on GitHub

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

# Change the default Port using your OS's environment variables

You can also use your operating system's environment variables to change the default port of your create-react-app.

Open your terminal and run the command that corresponds to your operating system and shell.

shell

Copied!
# 👇️ for macOS, Linux or Windows Git Bash
export PORT=3456

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

# 👇️ for Windows CMD (Command Prompt)
set PORT=3456

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

# 👇️ for Windows PowerShell
$env:PORT=3456

You can now run your npm start command without updating your scripts.

shell

Copied!
npm start

Assuming the scripts object in your package.json file looks as follows.

package.json

Copied!
{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

The code for this article is available on GitHub

Your react app will open on port 3456 and will be accessible at http://localhost:3456.

If you need to stop Create-React-App from opening the browser on npm start or open the application in a specific browser, check out my other article:

Stop Create-React-App from opening the Browser on npm start

If you have difficulties changing your port, try to update your version of create-react-app.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

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