789

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

3
  • 18
    Just quickly mentioning here that for Next.js projects you'll just use next -p 3005 if anyone else fall here looking for the same thing. Commented Oct 17, 2018 at 9:41
  • 1
    In my case package.json is using yarn "start": "yarn run react-scripts start" , so how to add port in this case ?
    – Arun
    Commented Mar 29, 2022 at 23:43
  • 1
    SeeAdding Development Environment Variables In .env - github.com/facebook/create-react-app/blob/4cdd5ac/packages/… Commented Sep 9, 2022 at 1:35

32 Answers 32

1355

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'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.

11
  • For windows set PORT=3005 && react-scripts start worked for me :)
    – Skylin R
    Commented Jun 27, 2017 at 10:42
  • 9
    You could also install the cross-env package and do "start": "cross-env PORT=3006 react-scripts start". That would work in every environment. Commented Apr 13, 2020 at 23:15
  • @MauricioLeal IMO installation of the additional package instead of simple and understandable fix looks like overkill
    – El Ruso
    Commented Apr 14, 2020 at 18:45
  • 6
    @ElRuso If the project is only used in a specific environment, I agree, it is overkill. The use case for something like cross-env is when you have several developers working on different systems. Maybe some prefer MACs, and some others prefer Windows. Or, another scenario, all developers use Windows but you want to add an Environment Variable that will be run on your CI/CD server that runs Ubuntu. I hope that helps. Commented Apr 21, 2020 at 15:47
  • 3
    On a Mac OS environment (or Ubuntu I gather should work as well), you need to add && between commands or terminate each command with a ";". Like so: "start": "export PORT=3006 && react-scripts start" (the answer provided by @mim
    – vsecades
    Commented Nov 5, 2021 at 15:03
540

Here is another way to accomplish this task.

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

PORT=3005
6
  • 9
    Using a .env file is supported out of the box with create-react-app. Just be sure not to check .env into source control if you put sensitive information in there.
    – Don
    Commented May 30, 2017 at 21:23
  • 34
    The is the method described in the create-react-app README.md
    – endeavor
    Commented Aug 9, 2017 at 2:57
  • 15
    @carkod Actually, they are saying to put sensitive data in a file other than .env. In Their case they recommend using .env.local which you should not check into source control, so that you can safely check .env into source control. So the same advice still applies.
    – Don
    Commented Jan 5, 2018 at 17:55
  • 12
    I like this answer better, since it makes use of the configuration options available, while the other solutions feel more like tricks/hacks. Commented Feb 19, 2018 at 10:37
  • 6
    This works for MacOSX and Windows with the same package.json file. Commented May 14, 2018 at 5:42
139

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

0
73

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",
3
  • This is exactly what I needed. Something that can work well on most common platforms for example my home setup is Windows and work is Mac.
    – icosmin
    Commented Apr 16, 2020 at 0:17
  • Best solution if the whole team need to run the code Commented Jan 19, 2022 at 12:38
  • I actually use the dotenv cli. I install it globally so I don't have to pollute the package.json with tooling specific to my machine. I just run applications with dotenv yarn start
    – bas
    Commented Nov 10, 2022 at 7:58
59

Method 1

Create .env File in the root folder of a project

enter image description here

Set like this

PORT=3005

Method 2

enter image description here

In package.json

set PORT=3006 && react-scripts start
3
  • 3
    its export PORT=3006 for mac Commented Nov 1, 2022 at 18:41
  • 1
    This is the most perfect solution for those who want a permanent change without specifying port each time or wanna use react with pm2. Thanks, you have saved my day. Commented Jun 30, 2023 at 12:54
  • For Ubuntu22, it is "start": "PORT=80 react-scripts start", Commented Dec 2, 2023 at 1:38
44

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
  • 2
    i will run two react application, one must be on port 3005 and the other should be on 3006 Commented Nov 22, 2016 at 0:00
  • 2
    @lem You can open two consoles, set environment variables to 3005 and 3006 in each one of them and run the application. Commented Nov 22, 2016 at 4:21
  • 3
    "start": "set PORT=3005 react-scripts start" just set the port but doesn't run the app Commented Nov 22, 2016 at 7:00
  • 7
    @legnoban add an && in between the 2 commands. "start": "set PORT=3005 && react-scripts start" Commented May 12, 2017 at 15:26
38

just run below command

PORT=3001 npm start
1
  • 2
    works with yarn start too. Commented Dec 4, 2021 at 17:23
24

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"
}
2
  • 2
    Consider adding a little prose to explain the intent of your code.
    – entpnerd
    Commented Feb 15, 2020 at 21:03
  • 1
    One command for all OSes: "start": "cross-env PORT=4000 react-scripts start" (requires npmjs.com/package/cross-env) Commented Apr 13, 2022 at 14:40
22

For windows, you can directly run this command on cmd

set PORT=3001 && npm start
4
  • 1
    IT will go to infinite loop
    – Ashok
    Commented Jan 19, 2022 at 6:23
  • 1
    This won't work at command line except overriding it Commented Feb 7, 2022 at 7:55
  • 1
    this code runs on cmd without doing any extra configuration Commented Feb 7, 2022 at 7:58
  • This method works perfectly for me, with the bonus of not needing to create or modify any files. Commented Jan 15 at 15:30
17

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

This worked for Linux Elementary OS

"start": "PORT=3500 react-scripts start"
1
  • This one just works fine!
    – anaszaman
    Commented Sep 23, 2021 at 5:48
11

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.

4
  • 21
    Beware: changes you make inside the node_modules directory will be blown away when the packages are updated. Probably best to use one of the other answers.
    – Don
    Commented May 30, 2017 at 21:19
  • upvoted because it gives insight on where they set this file (ended up here while I was simply trying to understand what create-react-app does behind the curtain)
    – ozgeneral
    Commented Dec 24, 2019 at 10:50
  • @ozgeneral You can also eject the app and have a more complete control. Though there are chances someone might mess things up but it will give you a scripts/start.js which is the same file as above and prevents update failure. Commented Aug 8, 2020 at 4:30
  • I think this is a terrible idea. Portability of the project is damaged
    – cylee
    Commented Jul 12, 2023 at 7:34
10

Why not just

PORT=3030 npm run start
10

To specify a port to run a Create React App (CRA) based project, you can utilize the PORT environment variable. By default, CRA uses port 3000, but you can override it with a custom port number. Here's how you can do it:

  1. Open a terminal or command prompt
  2. Navigate to the root directory of your CRA project.
  3. Set the PORT environment variable to your desired port number. For example, to run on port 8000, you can use the following command:

On macOS/Linux:

PORT=8000 npm start

On Windows (Command Prompt)

set PORT=8000 && npm start

On Windows (PowerShell):

$env:PORT = 8000; npm start

This command sets the PORT environment variable to 8000 before executing the npm start command, which starts the development server.

8

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.

7

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
5

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

2
  • There is no scripts dir in my create-react-app
    – AlxVallejo
    Commented Jan 6, 2019 at 19:47
  • 2
    For this answer to work, you need to yarn eject first. Commented Jan 15, 2019 at 18:02
5

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.

2
  • Correct, though this will work only for the session. But parametrizing this proving the port number will allow to each time provide a port(in case we don't know which are busy Commented Feb 7, 2022 at 7:57
  • I guess you can parametrize this too but at the end you will be saying say npm start -p 4000 instead of export PORT=4000 && npm start from a command line.
    – sçuçu
    Commented Feb 12, 2022 at 15:10
5

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
2
  • Or create a .env file with PORT=3006 Commented May 19, 2022 at 11:08
  • On Windows: "start": "set PORT=3006 && react-scripts start"
    – velkoon
    Commented Feb 28, 2023 at 19:10
4

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.

0
3

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

0
3

Try this:

npm start port=30022
2
  • Don't work for me, in Ubuntu machine (Digital Ocean)
    – lingar
    Commented Jun 15, 2020 at 10:40
  • @Ethan , it did work however it added my wish port number on top of the existing one , any ideas how to delete the 8081 and add 8000 ERROR in multi (webpack)-dev-server/client?localhost:8081 8000
    – Pxaml
    Commented Sep 10, 2020 at 17:27
3

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.

3

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

3

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
2

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
2
  • yes, I'd like to be able to specify port as a command line variable, (only) when I've got another server already using 3000. Commented Jan 9, 2018 at 9:09
  • Read the other answers, no need to eject Commented Apr 1, 2021 at 10:15
2

In Windows it can be done in 2 ways.

  1. 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;

  2. 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.

2

In Powershell on Windows (Run as Administrator):

(cd to your CRA app root folder)

$env:PORT=3002 ; npm start

2

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 .
0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.