How to change default port in React with 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.

{{ }

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 windowscan 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 system.

"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 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.