How to change the port number in React app

If you created a React app using the below command

npx create-react-app my-app

And when you run the app using

npm start

you can observe that your by default runs on port 3000

http://localhost:3000/

In this post we will see how to change the port number for a react app.

Changing port

To change the port number for your react app, we need to install a package called cross-env
It helps to change the environment variables for various OS
Run the below command to install cross-envas a dev dependency

yarn add cross-env -D

Now to change the port number simply open package.json and add the below script

"start": "cross-env PORT=4000 react-scripts start",

You can put whatever port you wish.