How to specify a port to run a create-react-app based project?
ReactjsNpmCreate React-AppReact ServerReactjs Problem Overview
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
Reactjs Solutions
Solution 1 - Reactjs
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.
Solution 2 - Reactjs
Here is another way to accomplish this task.
Create a .env
file at your project root and specify port number there. Like:
PORT=3005
Solution 3 - Reactjs
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
Solution 4 - Reactjs
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",
Solution 5 - Reactjs
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
Solution 6 - Reactjs
just run below command
PORT=3001 npm start
Solution 7 - Reactjs
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"
}
Solution 8 - Reactjs
For windows, you can directly run this command on cmd
set PORT=3001 && npm start
Solution 9 - Reactjs
Method 1
Create .env File in the root folder of a project
Set like this
port=3005
Method 2
In package.json
set PORT=3006 && react-scripts start
Solution 10 - Reactjs
You can modify your scripts inside package.json:
-on MacOs :
"scripts": {
"start": "PORT=9002 react-scripts start",
"build": "react-scripts build",
...
}
-on Windows
"scripts": {
"start": "set PORT=9002 && react-scripts start",
"build": "react-scripts build",
...
}
Solution 11 - Reactjs
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.
Solution 12 - Reactjs
Why not just
PORT=3030 npm run start
Solution 13 - Reactjs
This worked for Linux Elementary OS
"start": "PORT=3500 react-scripts start"
Solution 14 - Reactjs
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.
Solution 15 - Reactjs
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 ;)
Solution 16 - Reactjs
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.
You can use same expression in the package.json scripts too.
like:
"start": "export PORT=4000 react-scripts start"
But for that latter one you will need to change the package.json
, however, for the former one you will not change anything except port value in invocation from a command line.
Solution 17 - Reactjs
Can specify Port in package.json , by defining port number:
"scripts": {
"start": "PORT=3006 react-scripts start"}
OR Can specify port when running the script in terminal :
PORT=3003 npm start
Solution 18 - Reactjs
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
Solution 19 - Reactjs
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
Solution 20 - Reactjs
Try this:
npm start port=30022
Solution 21 - Reactjs
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.
Solution 22 - Reactjs
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/replace3000
with whatever port you want to use - Edit
config/webpack.config.dev.js
and do the same npm start
Solution 23 - Reactjs
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.
Solution 24 - Reactjs
I just create .env in the root of my project and change the PORT=3001
Solution 25 - Reactjs
In my case, my react project had two files: .env
and .env.development
.
I added this to .env.development
to get it working with the npm start
command for development:
PORT=3001
Solution 26 - Reactjs
In Powershell on Windows (Run as Administrator):
(cd to your CRA app root folder)
$env:PORT=3002 ; npm start
Solution 27 - Reactjs
In case you run npm start
in a Dockerfile, and you can't map ports in a docker run
, like doing something like -p 3001:3000
, this works:
FROM node
ENV PORT=3001
# whatever here, COPY .. etc.
CMD npm start
Or you can pass the port number as an argument in a docker buid
:
FROM node
ARG PORT=${PORT}
ENV PORT=${PORT}
# whatever here, COPY .. etc.
CMD npm start
using --build-arg
in docker buid
docker build --build-arg PORT=3001 .
Solution 28 - Reactjs
Edit the webpack.config.js and add the port you want to run this on. This is what you are looking for:
> 'devServer: { port: 3005, historyApiFallback: true, },
and
> output: { publicPath: "http://localhost:3005/";, },
Solution 29 - Reactjs
Edit your project/package.json
file.
Go to the scripts
section. Update the value corresponding to start
key to the following.
"start": "export PORT=4000; react-scripts start"
Now the your React app will be running at http://localhost:4000/
Note: You can use any port number, But better to avoid well-known port numbers like 22,21,80 etc.