A simple way to Change React App default port
The default port for react app is 3000 so your react app would normally run on localhost:3000 .
Sometimes, I’m working on a react project and I might need to make a few changes or quickly fix something on another react app, I don’t have to exit the project I’m actively working on just because I want to make some changes to another app. But if you can’t change the default port of the react app that’s what you would have to do.
There are a few ways to change the port without having to quit your application. Here’s how you do that.
1 way is to install a package called cross-env and use it to change the port settings of your app.
2specify the port you want inside your scripts in the package.json file of your app
Here’s how you make use of the solutions mentioned above. To set new port directly in package.json, inside the scripts in package.json you already have this line of code there "start”: "react-scripts start” it looks like this…
you need to edit the scripts line and change it to "start”: "SET PORT=5500 && react-scripts start”
Your start script will look like this now
Run npm start or yarn start to start your application and it’ll open in your browser at the port you’ve set.
You can also install the cross-env package and editing your package.json scripts to "start": "cross-env PORT=6000 react-scripts start"
While setting the port in your package.json script either using cross-env or ‘SET’ a common mistake is to set the port to an unacceptable port number like ‘6000’ this would cause your browser to throw this error ERR_UNSAFE_PORT`
To fix this, you could try the hard way of trying to set your browser to explicitly accept port 6000 — -explicitly-allowed-ports=6000 but it’s not easy in my experience to get this to work I use a Windows OS in case it’s easier to do this on a Mac or something.
To resolve this error you need to set your port to a different number and you can look through this list of restricted ports to know which ports are restricted
here.
Source for list of blocked ports
There are other ways of also changing default port you can do your research and try some of them out.
Happy New Year Peeps!!!
