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.

Prerequisites

• React JS
• Node.js & NPM

Creating React Application

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

npx create-react-app testapp

Step 2: Move to the project directory by running the below command to the terminal.

cd testapp

Project structure

It will look like this.

Example: Basic react app running on custom port 5000.

Javascript

// Filename - App.js
import React, { Component } from "react";

class App extends Component {
    render() {
        return (
            <div>
                <h1>GeeksForGeeks</h1>
                <h2>
                    Server is currently running on port 5000
                </h2>
            </div>
        );
    }
}

export default App;

Steps to Run the Application: Use this command in the terminal

npm start

Output: This output is visible on http://localhost:5000/ on the browser window

Method 1: 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. 

Method 2: Edit the package.json file

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.

Users need to edit the first line of the “scripts” object and they have to add the below code there.

"start": "set PORT=<specify_port_of_your_choice> && react-scripts start"

Example:

"start": "set PORT=5000 && react-scripts start"

After editing the package.json file, your “scripts” object should look like the below image.

Method 3: Install and add cross-env package

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.

npm i -D cross-env

devDependencies in package.json

{
    "devDependencies": {
        "cross-env": "^7.0.3"
    }
}

After installing the cross-env package, the user needs to edit the first line of the “scripts” object inside the package.json file. Users need to change the below code by removing the first line inside the “Scripts” object.

"start": "cross-env PORT=<specify_port_of_your_choice> react-scripts start"

Example:

"start": "cross-env PORT=5000 react-scripts start"

Your “Scripts” object should look like the below image after making changes inside the code.

Method 4: Specify port with the run command

In this method, We don’t need to edit any files inside the react app. We have to just mention the port with the run command of the react project. the user has to use the below command to run the project instead of npm start.

PORT=<specify_port_of_your_choice> npm start

Example:

PORT=5000 npm start

When the user will run the react project using the above command, it will start on the port of the user’s choice.