How to specify a port to run a create-react-app ba

问题:

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

回答1:

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"

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.

回答2:

Here is another way to accomplish this task.

Create a .env file at your project root and specify port number there. Like:

PORT=3005

回答3:

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

回答4:

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",

回答5:

Just update a bit in webpack.config.js:

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
  }

then run npm start again

回答6:

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.

回答7:

Changing in my package.json file "start": "export PORT=3001 && react-scripts start" worked for me too and I'm on macOS 10.13.4

回答8:

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:

1. Run npm run eject
2. Wait for that to finish
3. Edit scripts/start.js and find/replace 3000 with whatever port you want to use
4. Edit config/webpack.config.dev.js and do the same
5. npm start

回答9:

To summarize, we have three approaches to accomplish this:

1. Set an environment variable named "PORT"
2. Modify the "start" key under "scripts" part of package.json
3. 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

回答10:

This works on both Windows and Linux

package.json

"scripts": {
    "start": "set PORT=3006 && PORT=3006 react-scripts start || react-scripts start"
    ...
}

but you propably prefer to create .env with PORT=3006 written inside it

回答11:

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 ;)