Source:  Twitter logo

how to change react default port 3000 to others port ?

By default, a ReactJS app runs on port 3000. An Express.js app also runs on the same port 3000. If you were to run the two apps simultaneously, there would be conflicts. You need to change the port of one of them. In ReactJS, the easiest way to alter the port number is by setting an environment variable named PORT to the desired number via the terminal. As an example, here we change the port number to 5000.

if you use In Linux and Mac terminals, it would be

$export PORT=5000

or if you use In Windows, the command is slightly different

$env:PORT=5000

and finally start npm

npm start

NB: It is for .env file

If you want to modify your package.json Default is

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

and modify by

  "start": "PORT=2000 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

and finally run again

I use this

modify your package.json Linux and MacOS :

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

or

"start": "export PORT=6000 react-scripts start"

or Windows

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

and finally restart npm

I try to change default port by using this and success, So you can try

If better solution Please help me

A better way would be to add a .env file to your root folder. In it, just write:

PORT=<YOUR_PORT>.

This way is better, since you don't have to account for all operating systems. It will just work for all of them because of the way create-react-app works.

9 users liked answer #0dislike answer #09
Sagi Rika profile pic
Sagi Rika

As an alternative, you can define a "dev" option to start your server which will "concurrently" handle your react.js process and node.js server

By doing this, you will not bother yourself with defining env variables.

Here is backend package json file, scripts part. Then, just type: npm run dev on command line:

  "scripts": {
    "server": "node server.js",
    "client": "npm run start --prefix ./frontend",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  },

frontend folder contains react project and it is at the same level with package.json, that's why it is ./

0 users liked answer #1dislike answer #10
Abdulhakim profile pic
Abdulhakim

There are three ways of changing the default port for a react app:

  1. Setting environment variable (PORT variable)
  2. Modifying package.json by specifying PORT variable
  3. Setting PORT variable in a .env file under the project root directory

The most portable way to change the port is arguably by using .env file. This is since if you are using version control, you do not need to checkout the file containing your specific port configuration into the repository. Let's say your project collaborator prefers to run the app on different port, he can clone the project and run it without changing the source code and creating conflict with your setup.

Another reason is that the variable in .env file is isolated at the project level. So, you can start several react projects running on different ports at the same time. This is a better approach compared to setting a global PORT environment variable.

0 users liked answer #2dislike answer #20
mikaelfs profile pic
mikaelfs

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).