Как изменить порт react

Last update: January 15, 2022

If you are doing frontend development nowadays, you may have heard about ReactJS or may be actively using it in your projects. Introduced to the public five years ago, React has transformed into a library of choice for a lot of frontend developers that is easily certified by the enormous stars at its Github page (more than 100,000 stars). React was relicensed into MIT license almost a year ago, which only catapulted its popularity into a new high. The MIT license is a more commercial friendly license compared to the BSD + patents license that was previously used by React.

Creating a frontend project is easy with the help of scaffolding tools and boilerplates. Among the available choices is create-react-app, a React bootstrapping utility that takes care the laborious tasks of setting up a React project without much intervention about how the project should be structured. Given this nature, create-react-app is less assumed a boilerplate and more of a toolkit.

Creating a base React project with create-react-app is as simple as typing a one line command:

$ yarn create react-app my-awesome-app

And it comes with other variants, to satisfy different flavors preferred by the developers:
– use with npm

$ npm init react-app my-awesome-app

– use with npx

$ npx create-react-app my-awesome-app

After the project is created, we can run the app in development mode with the omnipresent command:

$ npm start

To see the app in action, we open the browser and navigate to http://localhost:3000. But here is where stuff can be somewhat tricky. Let’s say we build a RESTful service for the backend using NodeJS and Express. The default port used by Express is 3000, the same default port used by ReactJS development server. Consequently, we need to resolve this port conflict by changing one of the ports. Assume that we’re adamant to keep port 3000 for NodeJS backend, so the port change should be applied to React.

How can we do that? There are three approaches:
1. Setting environment variable
2. Modifying package.json
3. Creating .env file

1. Setting environment variable

To set the environment variable, we need to open the command line terminal and add a set a new environment variable for ReactJS port. Let’s say we want to change the port to 8000. After stopping the server (with Ctrl+C or Cmd+C), we then type.

$ export PORT=8000

We then restart the development server again with “npm start”.

This approach, however, is less preferred for an environment with several active projects. The environment variable PORT is arguably a generic, non-assuming variable name that can be used by other systems. Remember that by setting an environment variable via an export, that variable will be available for the all processes accessing or spawned by the shell. It will be better to localize the port assignment specific to React as shown in the remaining approaches.

Note for Windows user:
The export command does not exist on Windows. Alternatively, you can set the environment variable using the set command (case insensitive).

C:MYPROJECT> SET PORT=8000

Please note that the variable is not persistent and is only recognized in the current session. If you for example close the Windows command prompt, you will need to set the variable again.

2. Modifying package.json

Another approach is by modifying the command to start the development server in package.json. The default “scripts” key will contain the following object:

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

To change the development server port to port 8000, we need to modify the value of “start” key as follows:

...
  "scripts": {
    "start": “PORT=8000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

We validate the port change by restarting the server and accessing the app at http://localhost:8000

With this approach, the port variable is local to the React project. One little caveat is some purists may not like to embed the port configuration in the command. We can address this what-is-your-flavor issue in the next approach.

Note for Windows user:
Similar with the first approach, we need to use set command in order to set the environment variable for port number. The package.json for development on Windows will become as follows:

...
  "scripts": {
    "start": “set PORT=8000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

3. Creating .env file

A .env file contains the additional environment variables / configurations that are attached to the NodeJS process that’s running React development server. Remember that when setting an environment variable from the command line terminal, the variable will be available to all processes that interact with the shell. This way, using .env is a sound approach to localize the port configuration and make it available for read only by the React project.

ReactJS leverages dotenv to handle the process of loading the variables declared in .env into Node’s process.env.

The .env file should be created in the root directory of the React project. In other words, it resides in the same directory with package.json. If we change the React development server port to 8000, the content of .env file will be as follows.

.env

PORT=8000

To validate the port change, we restart the server again and then access the app at http://localhost:8000

Note for Windows user:
Unlike the previous two approaches, there is no difference in the content of .env file on Windows.

Concluding Remark

Changing default React development server port can be inevitable if you’re building a system with several NodeJS-based components. You can choose which approach works best for you when it comes to setting the port configuration for the React project.

The table below compares how we specify the port for ReactJS / create-react-app dev server in different operating systems. Let’s say we want to change the port to 8000 from the default number 3000.

export PORT=8000

export PORT=8000

set PORT=8000

export PORT=8000

...

  "scripts": {

    "start": "PORT=8000 react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  }

...

...

  "scripts": {

    "start": "PORT=8000 react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  }

...

...

  "scripts": {

    "start": "set PORT=8000 && react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  }

...

...

  "scripts": {

    "start": "PORT=8000 react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  }

...

Appendix

It is not uncommon to find projects that use react-app-rewired or craco (Create React App Configuration Override) package to override create-react-app webpack configs. For such case, react-scripts binary will be replaced with that of react-app-rewired or craco. The package.json that configures the dev server to run on user defined port, for e.g. port 8000, will look like as follows.

Ubuntu / CentOS / RHEL / MacOS environment:
– react-app-rewired

...
  "scripts": {
    "start": "PORT=8000 react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

– craco

...
  "scripts": {
    "start": "PORT=8000 craco start",
    "build": "craco build",
    "test": "craco test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

Windows environment:
– react-app-rewired

...
  "scripts": {
    "start": "set PORT=8000 && react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

– craco

...
  "scripts": {
    "start": "set PORT=8000 && craco start",
    "build": "craco build",
    "test": "craco test --env=jsdom",
    "eject": "react-scripts eject"
  }
...

Note that for the eject command, we do not replace the executable and opt to use the default react-scripts binary. This is since no configuration override will take place when project is being ejected.

When we create a new react app using the npx create-react-app command, the default port for the app is 3000. We can access the app from the localhost:3000.

In some situations, users need to run 2 or more react apps on their computer simultaneously but 2 react apps can’t be run on the same port. So, users need to change the default port of one of the react app. 

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.

Implementation: There are several methods to change the default port of the react app. In this tutorial, we will go through each method one by one. 

Note: Following is the common for code all method for root file i.e App.js and output is also given below.

Example:In App.js file, we will add some basic HTML code to render on the webpage. 

Output:

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.

yarn add -D cross-env

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.

When we create a new react app using the npx create-react-app command, the default port for the app is 3000. We can access the app from the localhost:3000.

In some situations, users need to run 2 or more react apps on their computer simultaneously but 2 react apps can’t be run on the same port. So, users need to change the default port of one of the react app. 

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.

Implementation: There are several methods to change the default port of the react app. In this tutorial, we will go through each method one by one. 

Note: Following is the common for code all method for root file i.e App.js and output is also given below.

Example:In App.js file, we will add some basic HTML code to render on the webpage. 

Output:

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.

yarn add -D cross-env

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.

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.

{{ }

What is the default port of react?

react app created using npx create-react-app command. It uses default port 3000 when app is started running an application. hostname with default port used to access the running application.

How do I change port number 3000 in react?

Changing port number 3000 to a new port can be done in multiple ways.

• First way, update the environment variable in the npm scripts

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

• Second way, use the cross-env npm library and configure npm scripts

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

• third-way using .env files that contain new port numbers in this file.

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

you can change using environment variables set port=“4000” in windows or export port=4000 in mac/unix in npm scripts for running react application.

Another way is to use dotenv to manage .env files

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 windows can 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 systems.

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

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

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.