How to Specify the Port to Run Create-React-App on Localhost

1. Set Up create-react-app Project
2. Specify the Port to Run create-react-app on Localhost
3. Change Port on create-react-app Project
4. Change Port on create-react-app Project Using cross-env Package

Facebook is an organization that developed and maintained React. The same team released the create-react-app package, which offers an excellent environment to develop React apps.

It allows you to focus on writing JSX and JavaScript code without the hassles of setting up web packs, transpilers, and other modern tools. You can create a React single-page application in just a few commands via npm.

Set Up create-react-app Project

Developers have to enter a command using tools like npm or yarn. The application created with create-react-app will be available on the localhost, where you can preview your application by going to localhost:3000.

Specify the Port to Run create-react-app on Localhost

Rather than living on a remote server, locally hosted applications live on your computer and can not be accessed from devices not connected to your network.

Sometimes you need to run two applications on localhost, so there needs to be a way for the browser to display different applications on different localhost addresses.

Usually, we use ports on local networks to differentiate between two different application instances on your localhost. Application A could be hosted on localhost:3000, while application B could be on localhost:3006.

Once you’ve created a create-react-app project and want to launch it, it will be hosted on the localhost:3000 address by default; the 3000 is the port here. When launching a create-react-app application, npm does not ask you to specify the port for running the application.

If you already have one React application running on your device and try to launch another, it will not automatically use a different port to host it. Instead, it will give you an error telling you that the application is already running on that port.

So you may need a way to specify that a specific create-react-app project should run on a different port. This way, you can have two create-react-app projects running simultaneously.

Change Port on create-react-app Project

To change the application’s port, you need to go to the project directory and locate a package.json file. It is located in the project’s main directory, so it’s not hard to find.

Once you open the file, find the "scripts" section, which controls the commands used to launch an application, such as npm start.

Change Port on Windows

Unless you make any changes, this section will look something like this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

However, you can specify the port when needed. To do this, you must change the value of the "start" property.

For instance, if you want the application to run on the 8000 port, you can make the following changes:

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

As you can see, we added the set PORT=8000 at the beginning and used the && operator to connect it with the previous value.

That’s all it takes to change the default port of a create-react-app project on Windows. If you run the application now, it will open on the localhost:8000 address in the browser.

Change Port on Linux/Mac

On Linux and Mac, you can change the default localhost port by altering the "scripts" section of the package.json file like this:

"start": "PORT=3006 react-scripts start"

If that doesn’t work on your version of Linux or Mac, you can try this:

"start": "export PORT=3006 react-scripts start"

Change Port on create-react-app Project Using cross-env Package

A JavaScript community has developed a way to set environment variables, such as PORT in one place, and it will run similarly across all platforms.

You must install the package using npm as a dev dependency. Make sure to get the spelling right:

npm install --save-dev cross-env

Then, change the "start" property in the "scripts" section to the following value:

"start": "cross-env PORT=3006 react-scripts start",

Currently, the package is in maintenance mode, which means no new features are added, but it still works.