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

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

I created an react application using 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 a new port number,an unassigned integer which is in 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.

{{ }

Configure Environment variables in react scripts

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

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

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

It is the 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 the 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 it, please change package.json as follows.

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

Temporarily with the command line you change the default port as follows

npm run start port=4000

Create a .env file in react application

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

add the port property with value in the .env file

.env file


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

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.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

How to fix Import In the body of module; reorder to top import/first? in React and javascript