Create an environment variable

This is the simplest method to change the default port of the react app. We need to create the .env file inside the project directory and add the environment variable. Users need to add the below code inside the .env file. 

PORT=<specify_port_of_your_choice> 

Example:

PORT=5000

Now, run the project using the npm start command, and react app will automatically start to run on the port of your choice. 

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

Usually the react app server runs on the port 3000. But there may be some situations, where user needs to specify a port to run the react app. So, users need to change the default port of the application and sepcify a custom port to run the application.

Similar Reads

Prerequisites

React JS Node.js & NPM...

Creating React Application

Step 1: Create a new react application running the below command to your terminal....

Project structure

It will look like this....

Method 1: Create an environment variable

...

Method 2: Edit the package.json file

This is the simplest method to change the default port of the react app. We need to create the .env file inside the project directory and add the environment variable. Users need to add the below code inside the .env file....

Method 3: Install and add cross-env package

In this method, we have to edit a single line of code inside the package.json file. Here, The user will find the code like “start”: “react-scripts start” inside the “scripts” object. In the below image, you can see the default view of the “scripts” object....

Method 4: Specify port with the run command

First, we need to install the “cross-env” package in the project directory. So, open the terminal and run the below command inside the project directory....

Contact Us