# How to change the default port for your react app

There are several ways to change the default port for your react application, Let us start with the easy one. 

### Change the port from your .env file

You can create a .env file and just add the port number you want to use. Like this

`PORT=4000`

```typescript
// .env file
PORT=4000
```

Once you set it, you can start your react application. React will automatically start the application using the PORT number you specified.  

### Changing the port from your package.json

You can also change your port number from your package.json file. Let us see how. 

Add P`ORT=3456` to the value of start on MacOS and `set PORT=4000` to the value of start on Windows.

**On macOS**

```typescript
"scripts": {
    "start": "port=4000 react-scripts start",
 },
```

**On Windows**

```typescript
"scripts": {
    "start": "set port=4000 && react-scripts start",
 },
```

### Changing the PORT number from the Terminal or CMD

Using this method, you are changing the port number using your OS's environmental variable.

```typescript
// Using cmd
set PORT=4000
```

```typescript
// using terminal, or bash
export PORT=4000
```

```typescript
// using powershell
$env:PORT=4000
```

After running this on your terminal or cmd, run `npm start` to start the project

### Using the cross-env package

The *cross-env* package can also change your port number to a custom port. First, to be able to change our port number using this package, we will have to install, it.

On your terminal or command prompt, run `npm install cross-env` Once it is installed add cross-env PORT=4000 to the value of start in your *package.json*

```typescript
"scripts": {
    "start": "cross-env PORT=4000 react-scripts start",
 },
```

After doing any of the above methods, your react app should be available on http://localhost:4000