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
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 && react-scripts start" Then start the application using NPM start. It will start the application in 9999 port.
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.
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:
npm run eject
scripts/start.js
and find/replace 3000
with whatever port you want to useconfig/webpack.config.dev.js
and do the samenpm start
just run below command
PORT=3001 npm start
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
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
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 && npm start
You can put the port number you like in place of the example value 4000
above.
Why not just
PORT=3030 npm run start
This works on both Windows and Linux (Doesn't work on Mac)
package.json
"scripts": {
"start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
...
}
but you propably prefer to create .env with PORT=3006 written inside it
This worked for Linux Elementary OS
"start": "PORT=3500 react-scripts start"
Here is another way to accomplish this task.
Create a .env
file at your project root and specify port number there. Like:
PORT=3005
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 ;)
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
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.
Try this:
npm start port=30022
To summarize, we have three approaches to accomplish this:
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
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 && react-scripts start"
}
package.json
(Ubuntu):
"scripts": {
"start": "export PORT=4000 && react-scripts start"
}
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.
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",
Source: Stackoverflow.com