# How to change the default Port for a create-react-app project

This article will show you how to change the default Port for a create-react-app project in two ways, such as editing the package.json method file or creating an env method file. Let’s go into detail now.

## Change the default Port for a create-react-app project

When we create a reactjs project and use the npm start command to run the program, webpack will automatically open the project on a web page with a local port url that is preset by default of the program to http://localhost:3000 /.

So if you want to change the local port from 3000 as default to another port, how do we do it? Follow the methods below to learn how to do it.

### Editing the package.json method file

In the package.json file, there will be a “scripts” section to build a script for the program so that when each statement is different, the program will run in a pre-arranged manner. So if we change the script of the npm start command, webpack will modify the script for this command.

Code:

  "scripts": {
"start": "set PORT=3030 && react-scripts start",
},

This is the code in the package.json file after the port has been reset to 3030, so when we run the start command, the program will read from the script, set port= 3030, and open it in a new tab.

### Creating an env method file

The env file is a global config file in NodeJS that is set automatically when the nodejs app starts, or we can create it manually. It can be visualized like this: When we create an environment file for the env operating system, webpack will automatically run through the file and read the commands inside to install the environment.

Code:

PORT=5000

We create an env file next to the package.json file so the program can identify the necessary environment files, such as package.json, env, and package-lock.json.

As in the example above, we have changed the project’s port to 5000, so when we run the command npm start, webpack will run through this file and notice that the default port has been changed.

## Summary

To sum up, you’ve been told two ways to change the default Port for a create-react-app project, such as editing the package.json file or creating the env file, but editing the package.json file should be easy to check control and avoid conflict. Let’s try it.

Maybe you are interested: