This post will show you how to specify a port other than 3000 for an app based on create-react-app. This solution is valid if your app is based on create-react-app.
npm start or yarn start by default will run the application on port 3000. What if you wanted to run another app simultaneously? This is possible! All you need to do is to specify a different port for second app. In fact, using this method you can run as many apps as you want.
There are two different methods to accomplish this task. First two methods do set port permanently and whenever you run your app it will run on the port you specify.
Method 1 (recommended) – Specify a PORT in .env file.
- Go and create a .env file at your project root if it does not exist already. .env file is default settings files for a react app. All its variables are read by the compiler. In this file, one variable is set per line with key=value pattern. You can skip this step if .env file already exists in your app.
- Add a new line to this file to specify port number there. Like:
PORT=3005
Method 2 – Specify PORT in package.json file.
In second method, we can specify port number in package.json. There is a slightly different syntax for different operating system though. You will change the line which says “start”: “react-scripts start”. Here we go.
Linux / MacOS
"start": "export PORT=3006 react-scripts start"
or (may be) more general solution such as this:
"start": "export PORT=3006 react-scripts start"
Windows
"start": "set PORT=3006 && react-scripts start"
restart your app after applying any of the methods above and your app should run in the specified port i.e. 3006 for this example.
