Reputation: 12664

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

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

Upvotes: 806

Answers (30)

Suresh B

Reputation: 427

For windows use cmd

set PORT=3001 && npm start

Upvotes: 10

Aguinaldo Possatto

Reputation: 757

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

Upvotes: 74

Lionel

Reputation: 251

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

Upvotes: 25

El Ruso

Reputation: 15861

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"

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's solution

"start": "set PORT=3006 && react-scripts start"

cross-env lib works everywhere. See Aguinaldo Possatto's 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.

Upvotes: 1389

Chris

Reputation: 824

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

Upvotes: 17

user8536600

Reputation:

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.

Upvotes: 4

surendrapanday

Reputation: 548

Lot of answers have not mentioned one key part for windows. For me what worked to run react app in specified port in windows was with following command. You can change port number from example below. Dont forget to use &&.

set PORT=4200 && react-scripts start

Upvotes: 7

lava

Reputation: 7343

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

Upvotes: 59

Arashpreet Singh

Reputation: 19

You have need to update your package.json to specify different PORT

In the script section replace start command like following: -

Make sure mentioned PORT is free to listen

"start": "export PORT=3001; react-scripts start"

Your application will start at http://localhost:3001

Thanks

Upvotes: 0

Sri Krishna Chowdary

Reputation: 61

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

Upvotes: 5

Harikrishnan

Reputation: 9979

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.

Upvotes: -1

prakash krishnan

Reputation: 831

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

Upvotes: 0

Emeeus

Reputation: 5250

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 .

Upvotes: 2

datchung

Reputation: 4622

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

Upvotes: 3

sçuçu

Reputation: 3070

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.

Upvotes: 5

Abass Dev

Reputation: 1

I just create .env in the root of my project and change the PORT=3001

Upvotes: 3

Abdul Malik

Reputation: 559

For windows, you can directly run this command on cmd

set PORT=3001 && npm start

Upvotes: 22

Gunnar Forsgren - Mobimation

Reputation: 1379

In Powershell on Windows (Run as Administrator):

(cd to your CRA app root folder)

$env:PORT=3002 ; npm start

Upvotes: 2

Bemsen Daniel

Reputation: 191

This worked for Linux Elementary OS

"start": "PORT=3500 react-scripts start"

Upvotes: 12

Muhammed Ozdogan

Reputation: 5867

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

Upvotes: 141

Kailash Choudhary

Reputation: 600

just run below command

PORT=3001 npm start

Upvotes: 39

olegtaranenko

Reputation: 3850

Why not just

PORT=3030 npm run start

Upvotes: 10

mevrick

Reputation: 1045

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.

Upvotes: 3

Oben Desmond

Reputation: 171

Try this:

npm start port=30022

Upvotes: 3

Shahriar Hasan Sayeed

Reputation: 5935

Here is another way to accomplish this task.

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

PORT=3005

Upvotes: 562

Ayodeji

Reputation: 370

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.

Upvotes: 11

Sanchit Bhatnagar

Reputation: 905

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.

Upvotes: 8

rahulnikhare

Reputation: 1486

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.

Upvotes: 2

akhisyabab

Reputation: 179

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

Upvotes: 5

Refayat Haque

Reputation: 81

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

Upvotes: 3

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

Answers (30)

Related Questions