When developing a React application that interacts with APIs, it’s essential to manage different API URLs for various environments such as development, staging, and production. In this guide, we will explore a robust approach to handling environment-specific API URLs in your React application using a configuration file and environment variables.

Prerequisites:

• Basic knowledge of React and JavaScript.
• Node.js and npm installed on your machine.
• A text editor or integrated development environment (IDE).

Step 1: Create a Configuration File:

Start by creating a configuration file named config.js in the src directory of your React project. This file will define different environment URLs.

// src/config.js
const config = {
  development: {
    apiUrl: "http://localhost:4003/",
  },
  staging: {
    apiUrl: "https://staging-api.example.com/",
  },
  production: {
    apiUrl: "https://api.example.com/",
  },
};

export default config;

Step 2: Set Up React Service:

Create a service file, such as Service.js, where you will use the configuration and set up Axios with the appropriate API URL based on the environment.

// src/Service.js
import axios from 'axios';
import config from './config';

class Service {
  constructor() {
    const apiUrl = config[process.env.NODE_ENV].apiUrl;
    const service = axios.create({
      baseURL: apiUrl,
    });
    // Add interceptors and other configurations
    this.service = service;
  }

  // Other service methods
}

export default new Service();

Step 3: Update Package.json (Including ‘cross-env’ Solution):

In your package.json file, you can set up scripts for different environments by using the cross-env package. This package ensures consistent setting of environment variable setting across different operating systems.

Install cross-env Locally:
Let’s first install cross-env as a development dependency in your project. Open your terminal and navigate to your project directory, then run the following command:

npm install --save-dev cross-env

This command adds the cross-env package to the node_modules folder of your project.

Update Package.json Scripts:

Next, change your package.json scripts to use the locally installed cross-env. This step ensures that the NODE _ENV environment variable is set correctly, regardless of your operating system.

// package.json
{
  "scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "build": "NODE_ENV=production react-scripts build",
    "start-staging": "NODE_ENV=staging react-scripts start",
    "build-staging": "NODE_ENV=staging react-scripts build",
    // Add more scripts for custom environments
  }
}

Step 4: Use the Service in Components:

Now you can use the Service class in your React components to make API calls with the appropriate URL for each environment.

// src/components/ExampleComponent.js
import React, { Component } from 'react';
import Service from '../Service';

class ExampleComponent extends Component {
  componentDidMount() {
    // Use the service to make API calls
    Service.get('/endpoint')
      .then(response => {
        // Handle the response
      })
      .catch(error => {
        // Handle errors
      });
  }

  render() {
    // Render your component
  }
}

export default ExampleComponent;

Conclusion:

By following this approach, you can seamlessly manage different API URLs for different environments in your React application. This approach ensures that your application is well prepared for the development, testing, and production phases without manual URL changes.

Remember to customize the environment names, URLs, and component names to suit the needs of your project. With this setup, your React application becomes more flexible and adaptable, allowing you to efficiently switch between different environments during development and deployment.