Configuring the Development Port in Create React App

Create React App (CRA) is a popular tool for quickly setting up a modern React web application. By default, CRA runs your application on port 3000. However, there are scenarios where you might need to change this, such as running multiple instances of the application simultaneously for testing or development. This tutorial explains how to configure the development port for your CRA project.

Understanding the Default Behavior

When you run npm start or yarn start in a CRA project, the react-scripts package handles the development server setup. It automatically selects port 3000 unless that port is already in use. If port 3000 is occupied, CRA will attempt to find an available port and display a message indicating the port it’s using.

Methods for Changing the Development Port

There are several ways to specify a different port for your CRA application:

1. Using Environment Variables

This is the recommended and most flexible approach. Environment variables allow you to configure your application without modifying your codebase.

• .env File: Create a file named .env in the root directory of your project (the same directory as your package.json file). Add a line specifying the PORT variable:

  PORT=3005
  

  CRA automatically loads environment variables from the .env file during development. Note: You should add .env to your .gitignore file to prevent sensitive information from being committed to your repository.

• Directly in the Command Line (Temporary): You can also set the PORT variable directly in your terminal before running npm start or yarn start. This approach is useful for testing or one-off configurations.

  • Linux/macOS:

    PORT=3006 npm start
    # or
    PORT=3006 yarn start
    

  • Windows (Command Prompt):

    set PORT=3006 & npm start
    # or
    set PORT=3006 & yarn start
    

  • Windows (PowerShell):

    $env:PORT=3006; npm start
    # or
    $env:PORT=3006; yarn start
    

2. Modifying the package.json Script

You can directly modify the start script in your package.json file. While this works, it makes your configuration less portable and requires modifying your codebase.

• Linux/macOS:

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

• Windows:

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

3. Using cross-env (Cross-Platform Compatibility)

For a more robust and cross-platform solution, consider using the cross-env package. This package ensures that environment variables are set correctly regardless of the operating system.

• Installation:

  yarn add -D cross-env
  # or
  npm install --save-dev cross-env
  

• Usage in package.json:

  {
    "scripts": {
      "start": "cross-env PORT=3006 react-scripts start"
    }
  }
  

Best Practices

• Prioritize Environment Variables: Using environment variables (through .env files or direct command-line setting) is generally the best practice. It keeps your configuration separate from your code, making your project more portable and maintainable.
• Ignore .env Files: Always add .env files to your .gitignore file to prevent accidental commits of sensitive information.
• Choose a Consistent Method: Select one method for setting the port and stick to it throughout your project for consistency.
• Consider Port Conflicts: If you’re running multiple development servers, be mindful of port conflicts. Choose different ports for each server to avoid issues.