If you have created a React project using create-react-app you will notice that the application will launch on the default 3000 port. But you can change it using environment file or script.

In this article, we will see what are the possible ways to launch react project on a different port.

Way to run react app on a different port

1. Using environment configuration
2. Using script
3. Using package

1. Using environment configuration

We prefer to use environment variables saved in .env file (useful to store sets of variables for different deploy configurations in a convenient and readable form). Don’t forget to add *.env into .gitignore if you’re still storing your secrets in .env files.

Create a .env file at your project root and specify port number there.

2. Using script

If you don’t want to set the environment variable, another option is to modify the scripts part of package.json.

From:

To:

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by aswin-s on MacOS Sierra 10.12.4):

or (may be) more general solution

For windows system

3. Using package

You can also use the cross-env library to set the port, and it will work on Windows, Linux and Mac.

Run the following command to install cross-env package in devDependencies.

Now, update the start command of the package.json.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂