The local server allows you to inspect your web application in the development phase.However, the port used by your web application is usually hidden from the
package.json file.Here are examples of the
scripts object in React and Angular applications:
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
As you can see, none of the
start scripts above contains the port used by the local server.
The reason that the port is not explicitly set is because the server used by these applications dynamically changes its port when the default port is busy.
To identify the port used by the applications, you need to run the
start script and see the output.
At the time of this writing, React uses port
3000 while Angular uses port
When the default port is used, both apps will handle the issue according to their own configurations.
React will ask if you would like to run the app on another port as shown below:
? Something is already running on port 3000. Probably:
Would you like to run the app on another port instead? › (Y/n)
Usually, React will change the port to
The same goes for Angular:
> firstname.lastname@example.org start
> ng serve
? Port <span class="m">4200</span> is already in use.
Would you like to use a different port? <span class="o">(</span>Y/n<span class="o">)</span>
Angular will change the application port to
The default port used by Vue is usually
8000, so all these applications have different default ports defined by the creator.
How to change the default port for npm start
To change the server port used by your project, you can create a
.env file that defines the default port you want to use:
Save the file above in the root directory of your project.
The next time you run the
npm start command, the default port used will be
Alternatively, you can set the port directly inside the
start script in your
package.json file as follows:
// Mac / Linux
"start": "PORT=7200 react-scripts start",
"start": "set PORT=7200 && react-scripts start",
You are free to use whichever method you liked best.
Change default port for static servers
Sometimes, you may also see an application that uses a static server like
live-server as the local development server:
"start": "http-server -a localhost"
These static servers usually have the default port listed in their documentation. For example, the
http-server has the default port of
You should be able to change the port by adding the
--port option as follows:
"start": "http-server -a localhost -p 7200"
"start": "http-server -a localhost --port=7200"
Now you’ve learned how to identify and change the port used when you run the
npm start command.
Although the default port for modern applications is not defined in the
package.json file, you can always run the
start script to see the port number.