How to Specify the Port to Run Create-React-App on Localhost
-
Set Up
create-react-app
Project -
Specify the Port to Run
create-react-app
on Localhost -
Change Port on
create-react-app
Project -
Change Port on
create-react-app
Project Usingcross-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.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn