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

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

The project contains package.json which 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 new number which is in between 0 to 2 power 16 -1 unassigned integer.

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

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

{{ }

Environment variables

Environment variables are specific to running machine operating system. You have to overrides port environment variables to new number.

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

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

this is way you can environment set port=4000

In Linux/Ubuntu/Mac system

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

cross-env npm library to change port

first, install cross-env using npm command, This only needs dependency at development dependency

This works on all OS like windows, Linux and Mac machines.

npm install --save-dev cross-env

Once you installed, please change package.json as follows

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

Temporarily with command line you change default port as follows

npm run start port=4000

Create a .env file

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

add the port property with value in .env file

.env file

port=4000

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

Wrapup

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