How to use environment variables in a react Js project

In React.js, managing environment variables is crucial for handling configuration settings, API keys, and other sensitive information across different environments (e.g., development, staging, production). There are various approaches to managing environment variables in a React.js application. Below, I’ll outline a common method using the dotenv package along with Webpack.

1. Install the required dependencies: Start by installing the dotenv package, which allows you to load environment variables from a .env file into the process.env object.

Using npm:

npm install dotenv --save-dev

2. Create a .env file: In the root of your React.js project, create a file named .env. This file will hold your environment-specific configuration variables. For example:

REACT_APP_API_BASE_URL=https://api.example.com
REACT_APP_ENV=development

Note: Prefixing the variables with REACT_APP_ is necessary to make them accessible in your React code.Configure Webpack: To make the environment variables accessible in your React components, you need to configure Webpack to load the .env file.

3. In your Webpack configuration (typically webpack.config.js or webpack.config.dev.js), add the following:

const Dotenv = require('dotenv-webpack');

module.exports = {
  // ... other configurations ...
  plugins: [
    new Dotenv()
  ],
  // ... other configurations ...
};

This will load the environment variables defined in the .env file into your app during the build process.

4. Accessing environment variables in your code:

Now, you can access the environment variables from your React components like this:

const apiUrl = process.env.REACT_APP_API_BASE_URL;
const environment = process.env.REACT_APP_ENV;

It’s important to note that the environment variables loaded from the .env file will be embedded in your application during the build process. Therefore, each environment (e.g., development, staging, production) should have its own separate .env file.

For example, you can create .env.development, .env.staging, and .env.production files, each containing the appropriate variables for the corresponding environment. Then, you can set up your build scripts to load the appropriate .env file based on the target environment.

Set up build scripts

You’ll need to modify your build scripts to load the appropriate .env file based on the target environment.

In your package.json, modify the start, build, and any other relevant scripts like this:

"scripts": {
  "start": "react-scripts --env=development start",
  "build:staging": "react-scripts --env=staging build",
  "build:production": "react-scripts --env=production build",
  // ... other scripts ...
},

Here, we’ve added --env=development, --env=staging, and --env=production to the respective scripts. The value after --env= should match the suffix of the .env file you want to load.

Remember to add the .env files to your version control system's .gitignore to avoid committing sensitive information to your repository.

By using the dotenv package and Webpack configuration, you can efficiently manage environment variables in your React.js application and keep your sensitive information secure while deploying your app across different environments.

Cheers!