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

reactjs npm
letthefireflieslive picture letthefireflieslive · Nov 21, 2016 · Viewed 213k times · Source

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

Answer

El Ruso picture El Ruso · Jan 20, 2017

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.

Related questions

How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. So I am playing around with reactabular.js. Whenever I do a npm start it always runs on localhost:8080. How do I change it …

Read More
Webpack how to build production code and how to use it

I am very new to webpack, I found that in production build we can able to reduce the size of overall code. Currently webpack builds around 8MB files and main.js around 5MB. How to reduce the size of code …

Read More
What exactly is the 'react-scripts start' command?

I've been working with a React project using create-react-app and I have two options to start the project: First way: npm run start with the definition at the package.json like this: "start": "react-scripts start", Second way: npm start What …

Read More