How to change the default port 3000 in React with the create-react-app command?

React application listens at default port(3000) if you create an application with the create-react-app command.

I created a react application using the create-react-app command. The project contains package.json that contains scripts for starting and running an application.

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

Sometimes, We need to change the port to a new port number, an unassigned integer which is always between 0 to 2 power 16 -1, .

This short post covers a how to change the default port in react application

There are multiple ways we can change the default port in react application.

{{ }

What is the default port of react?

react app created using npx create-react-app command. It uses default port 3000 when app is started running an application. hostname with default port used to access the running application.

How do I change port number 3000 in react?

Changing port number 3000 to a new port can be done in multiple ways.

• First way, update the environment variable in the npm scripts

"scripts": {
        "start": "set port=4000 && react-scripts start",
    }

• Second way, use the cross-env npm library and configure npm scripts

"scripts": {
        "start": "cross-env port=4000 && react-scripts start",
    }

• third-way using .env files that contain new port numbers in this file.

How do you specify a port to run a create-react-app-based project?

you can change using environment variables set port=“4000” in windows or export port=4000 in mac/unix in npm scripts for running react application.

Another way is to use dotenv to manage .env files

Change port number with environment variables using react scripts

react scripts are default scripts used to run and stop the application.

So, You have to add environment variables to this script.

Environment variables are specific to running machine operating systems. You have to override port environment variables to a new number.

The syntax for adding environment variables is different from Operating System.

For example, In windows can change the start script as follows.

"scripts": {
        "start": "set port=4000 && react-scripts start",
    }

This way, you can set the environment with port number(set port=4000)

Similarly, In Linux/Ubuntu/Mac systems.

"scripts": {
        "start": "export port=4000 && react-scripts start",
    }

The export command is used to set a port environment variable with the desired port number. added this command to start scripts in package.json

React change the port using cross-env npm library

First, install cross-env using the npm command. This works on all OS like Windows, Linux, and Mac machines.

It needs dependency as development dependency using the --save-dev option

npm install --save-dev cross-env

Once you installed it, please change package.json as follows.

"scripts": {
        "start": "cross-env port=4000 && react-scripts start",
    }

The above changes are permanent and always take 4000 ports for react application listens to. Similarly, You can change temporarily with the command line you change the default port as follows.

npm run start port=4000

Change port number with .env file in react application

Another easy approach is to create a .env file at the root of an application.

add the port property with a value in the .env file.

.env file:

port=4000

Note, the .env file contains environment-specific information, please add it to the .gitignore file not to commit to the source repository.

Now, start the application.

Wrap up

Adding environment variables like port to the existing machine is a better and clean approach. You can change multiple ways to change the default port in react application. You can choose based on your needs.