How to identify and change the npm start server port

In modern JavaScript applications, the npm start command usually runs a local server that you can visit from the browser.

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:

{
  // React
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  // Angular
  "scripts": {
    "ng": "ng",
    "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 4200.

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:
  ...
  in ...

Would you like to run the app on another port instead? › (Y/n)

Usually, React will change the port to 3001.

The same goes for Angular:

> [email protected] start
> ng serve

? Port 4200 is already in use.
Would you like to use a different port? (Y/n) 

Angular will change the application port to 52767.

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:

PORT=7200

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

Alternatively, you can set the port directly inside the start script in your package.json file as follows:

// Mac / Linux
"scripts": {
    "start": "PORT=7200 react-scripts start",
}

// Windows
"scripts": {
    "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 http-server or 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 8080.

You should be able to change the port by adding the -p or --port option as follows:

"start": "http-server -a localhost -p 7200"
// or
"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.