Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the package.json.

How can I specify a port of my choice in this case? I want to run two of this project simultaneously (for testing), one in port 3005 and other is 3006

like image 548
letthefireflieslive Avatar asked Nov 21 '16 07:11

letthefireflieslive


People also ask

How do I start the react app on a specific port?

In ReactJS, the easiest way to alter the port number is by setting an environment variable named PORT to the desired number via the terminal. As an example, here we change the port number to 5000. your local server will run on port 5000.

How do I start NPM on a different port?

Use '--port' to specify a different port. Port 4200 is already in use. Use '--port' to specify a different port. : Port 4200 is already in use.


1 Answers

If you don't want to set the environment variable, another option is to modify the scripts part of package.json from:

"start": "react-scripts start" 

to

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4):

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

or (may be) more general solution by @IsaacPak

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

Windows @JacobEnsor solution

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

cross-env lib works everywhere. See Aguinaldo Possatto answer for details

Update due to the popularity of my answer: Currently I prefer to use environment variables saved in .env file(useful to store sets of variables for different deploy configurations in a convenient and readable form). Don't forget to add *.env into .gitignore if you're still storing your secrets in .env files. Here is the explanation of why using environment variables is better in the most cases. Here is the explanation of why storing secrets in environment is bad idea.

like image 183
El Ruso Avatar answered Sep 22 '22 23:09

El Ruso