Step-by-Step Guide: Reactjs port change

Jul 30, 2023 | javascript, programming | 0 comments

reactjs port change

This blog is all about Step-by-Step Guide: Reactjs port change from default to your custom value. Without any further a due let’s get started.

Introduction:

When developing a React app using create-react-app, the default port for running the application is 3000. However, there are situations where developers may need to run multiple React apps simultaneously or use a specific port for various reasons. Fortunately, there are several methods to set a custom port for a React app, allowing greater flexibility and avoiding conflicts when running multiple instances of the application. In this blog post, we will explore different approaches to specify a custom port for a React app based on create-react-app.

create-react-app port change reactjs port change
Image courtesy: Lautaro Andreani

Method 1: ReactJs port change using ENV File

One of the simplest methods to set a custom port is by using an environment variable. This involves creating a .env file in the project directory and declaring the desired port using the syntax PORT=<port_number>.

Here’s a step-by-step guide:

  1. Create a new file in the project root directory and name it “.env”.
  2. Add the following line to the .env file, replacing <port_number> with the desired port: PORT=<port_number>.
  3. Save the .env file.
  4. To start the React app with the custom port, use the command npm start.

Method 2: Modifying Package.json File

Another approach involves modifying the “start” script in the package.json file. Depending on the operating system, the script can be updated to include the desired port. Here are the steps for both macOS and Windows:

For macOS:

  1. Open the package.json file in the project root directory.
  2. Locate the “scripts” section, which contains the “start” script.
  3. Modify the “start” script to include the custom port: "start": "PORT=<port_number> react-scripts start"
  4. Replace <port_number> with the desired port.
  5. Save the package.json file.
  6. To start the React app with the custom port, use the command npm start.

For Windows:

  1. Open the package.json file in the project root directory.
  2. Locate the “scripts” section, which contains the “start” script.
  3. Modify the “start” script to include the custom port in the Windows syntax: "start": "set PORT=<port_number> && react-scripts start"
  4. Replace <port_number> with the desired port.
  5. Save the package.json file.
  6. To start the React app with the custom port, use the command npm start.

Method 3: Using cross-env Package

The cross-env package provides a universal way to set environment variables across different platforms. This method is particularly useful when working on projects that need to be run on various operating systems. To use the cross-env package, follow these steps:

  1. Install the cross-env package as a development dependency using the following command:
  2. npm install -D cross-env
  3. Open the package.json file in the project root directory.
  4. Locate the “scripts” section, which contains the “start” script.
  5. Modify the “start” script to use cross-env with the custom port:
  6. "start": "cross-env PORT=<port_number> react-scripts start"
  7. Replace <port_number> with the desired port.
  8. Save the package.json file.
  9. To start the React app with the custom port, use the command npm start.

Method 4: ReactJs port change directly Setting Environment Variable

In addition to the aforementioned methods, you can set the environment variable directly from the command line. The steps differ slightly depending on the operating system:

For Linux:

  1. Open the terminal.
  2. Use the export command to set the PORT environment variable: $ export PORT=<port_number>
  3. Replace <port_number> with the desired port.
  4. Run the React app with the custom port using the command npm start.

For Windows (Powershell):

  1. Open the Powershell.
  2. Use the $env variable to set the PORT environment variable: $env:PORT=<port_number>
  3. Replace <port_number> with the desired port.
  4. Run the React app with the custom port using the command npm start.

Method 5: Directly Specifying Port in the Run Command

An alternative method is to specify the port directly in the run command. Here’s how:

  1. Open the terminal or command prompt.
  2. Use the PORT environment variable in the run command: PORT=<port_number> npm start
  3. Replace <port_number> with the desired port.
  4. Run the React app with the custom port using the modified run command.

Conclusion:

Setting a custom port for a React app based on create-react-app is essential for developers who need to run multiple instances of the application or have specific port requirements. This blog explored several methods to achieve this, including using an ENV file, modifying the package.json file, using the cross-env package, and directly setting environment variables from the command line. By following these steps, developers can easily configure their React apps to run on their desired ports, allowing smoother development and testing experiences.

Remember, each method has its advantages, so choose the one that best suits your project’s needs and platform compatibility. Happy coding!

Also read: How to make a react quote generator easy and in simple steps

References:

  1. How to specify a port to run a create react app based project