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

A React application typically listens on the default port (3000) when created with the create-react-app command.

Upon creating a React application using the create-react-app command, the project includes a package.json file containing scripts for starting and running the application.

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

Sometimes, it becomes necessary to change the port to a new number. This number must be an unassigned integer falling within the range of 0 to 2^16 - 1.

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

There are several methods available to change the default port in a React application.

#What is the Default Port of React?

A React application created using the npx create-react-app command defaults to port 3000 when the application is started.

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 the default port number 3000 in a React application can be accomplished through multiple methods.

• Updating Environment Variables in npm Scripts

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

run the npm run start to start server, listens at 4000 port.

• Using the cross-env npm Library

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

• using .env file You can define the port number in .ENV file

port=4000

#How Do You Specify a Port to Run a Create-React-App-Based Project?

One way, You can specify a port using environment variables set to set port="4000" in Windows or export port=4000 in macOS/Unix within npm scripts for running the React application.

Another way is to utilize dotenv to manage .env files.

Another way is to use dotenv to manage .env files

#Changing 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: Changing the Port Using the 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 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 cleaner approach. There are multiple methods available to change the default port in a React application, allowing you to choose based on your needs.