How to specify a port to run a create-react-app based project?

📝 Title: How to Specify a Port to Run a create-react-app Based Project 🚀

Are you using create-react-app to power your amazing project and suddenly find yourself wondering how to run it on a different port? You're not alone! Many developers face this challenge when they need to run multiple create-react-app projects simultaneously for testing or other purposes. In this guide, we'll explore the common issue of specifying a port for a create-react-app based project and provide you with easy solutions.

🔎 Understanding the Problem

By default, when you run npm start or yarn start, create-react-app launches your application on port 3000. However, there is no direct option in the package.json to specify a different port. This can be problematic if you wish to run multiple instances of your project on different ports, just like our curious visitor who wants to test their project on ports 3005 and 3006.

⚡️ Solution 1: Using the Environment Variable

One way to specify a port is by utilizing environment variables. In your project's root directory, create a file named .env. Inside this file, add the following line:

PORT=3005

Save the file and restart your project using npm start or yarn start. Your application will now be running on the specified port! 🎉

But what if you also want to run another instance of your project on port 3006? No worries, we've got a solution for that too.

⚡️ Solution 2: Modifying the Package.json Script

To run your create-react-app project on a different port, you can modify the "start" script in your package.json file. Open the file and locate the "scripts" section.

"scripts": {
  "start": "react-scripts start"
}

Replace the "start" value with the following command, specifying your desired port:

"scripts": {
  "start": "PORT=3005 react-scripts start"
}

Save the package.json file and restart your project using npm start or yarn start. Voila! Your project will be running on the port you specified. 🚀

👍 Final Thoughts and Call-to-Action

Specifying a port to run a create-react-app based project is crucial, especially when you need to handle multiple instances simultaneously. By utilizing environment variables or modifying the package.json script, you can easily overcome this limitation and run your projects on desired ports.

Now that you've learned these simple yet effective solutions, it's time to implement them and unlock the full potential of your create-react-app projects. Give it a try today and share your experience in the comments below! 💬

Remember, technology is all about sharing knowledge and helping each other grow. If you found this guide useful, don't hesitate to share it with your fellow developers. Together, we can overcome any coding challenge! 🌟