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

Question

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

User · Accepted Answer

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  amp  amp  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

User · Answer

In case you have already done npm run eject  go to scripts start js and change port in const DEFAULT PORT   parseInt process env PORT  10     3000   3000 in this case  to whatever port you want

User · Answer

Why not just PORT 3030 npm run start

User · Answer

just run below command PORT 3001 npm start

User · Answer

Try this   npm start port 30022

User · Answer

For my windows folks I discovered a way to change ReactJS port to run on any port you want Before running the server go to    node modules react-scripts scripts start js   In it  search for the line below and change the port number to your desired port   var DEFAULT PORT   process env PORT     4000     And you are good to go

User · Answer

Create a file with name  env in the main directory besidespackage json and set PORT variable to desired port number  For example   env PORT 4200  You can find the documentation for this action here  https   create-react-app dev docs advanced-configuration

User · Answer

You can specify a environment variable named PORT to specify the port on which the server will run      export PORT 3005  Linux    env PORT 3005   Windows - Powershell

User · Answer

In Windows it can be done in 2 ways    Under    node modules react-scripts scripts start js    search for   DEFAULT PORT  and add the desire port number   E g   const DEFAULT PORT   parseInt process env PORT  10     9999  In package json   appent the below line   start    set PORT 9999  amp  amp  react-scripts start  Then start the application using NPM start  It will start the application in 9999  port

User · Answer

Changing in my package json file  start    export PORT 3001  amp  amp  react-scripts start  worked for me too and I m on macOS 10 13 4

User · Answer

This works on both Windows and Linux  Doesn t work on Mac  package json  quot scripts quot          quot start quot    quot  set PORT 3006    export PORT 3006   amp  amp  react-scripts start quot             but you propably prefer to create  env with PORT 3006 written inside it

User · Answer

How about giving the port number while invoking the command without need to change anything in your application code or environment files  That way it is possible running and serving same code base from several different ports   like     export PORT 4000  amp  amp  npm start  You can put the port number you like in place of the example value 4000 above

User · Answer

You could use cross-env to set the port  and it will work on Windows  Linux and Mac   yarn add -D cross-env   then in package json the start link could be like this    start    cross-env PORT 3006 react-scripts start

User · Answer

This worked for Linux Elementary OS  quot start quot    quot PORT 3500 react-scripts start quot

User · Answer

Just update a bit in webpack config js   devServer        historyApiFallback  true      contentBase            port  3000     lt --- Add this line and choose your own port number     then run npm start again

User · Answer

Here is another way to accomplish this task   Create a  env file at your project root and specify port number there  Like   PORT 3005

User · Answer

In your package json  go to scripts and use --port 4000 or set PORT 4000  like in the example below   package json  Windows     scripts          start    set PORT 4000  amp  amp  react-scripts start      package json  Ubuntu     scripts          start    export PORT 4000  amp  amp  react-scripts start

User · Answer

To summarize  we have three approaches to accomplish this    Set an environment variable named  PORT  Modify the  start  key under  scripts  part of package json Create a  env file and put the PORT configuration in it   The most portable one will be the last approach  But as mentioned by other poster  add  env into  gitignore in order not to upload the configuration to the public source repository   More details  this article

User · Answer

It would be nice to be able to specify a port other than 3000  either as a command line parameter or an environment variable   Right now  the process is pretty involved    Run npm run eject Wait for that to finish Edit scripts start js and find replace 3000 with whatever port you want to use Edit config webpack config dev js and do the same npm start

User · Answer

you can find default port configuration at start your app    yourapp scripts start js  scroll down and change the port to whatever you want  const DEFAULT PORT   parseInt process env PORT  10     4000   hope this may help you

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

Examples related to reactjs

Examples related to npm