Adding an .env file to a React project

Adding an .env file to a React project

When working on a React project, you may come across the need to store sensitive information such as API keys, database credentials, or other configuration variables. It’s important to keep this information secure and separate from your codebase. One way to achieve this is by using an .env file.

The .env file is a configuration file that allows you to define environment variables specific to your project. These variables can be accessed within your code, making it easy to manage sensitive information without exposing it in your codebase.

Step 1: Create an .env file

To get started, create a new file in the root directory of your React project and name it “.env”. This file will contain all your environment variables.

Here’s an example of how your .env file might look:


REACT_APP_API_KEY=your_api_key
REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=development


Note that each variable should be defined in the format of “KEY=VALUE”. In this example, we have defined three variables: REACT_APP_API_KEY, REACT_APP_API_URL, and REACT_APP_ENV.

Step 2: Accessing environment variables

Once you have defined your environment variables in the .env file, you can access them in your code using the “process.env” object. In a React project, it’s recommended to prefix your variables with “REACT_APP_” to avoid conflicts with other environment variables.

Here’s an example of how you can access the environment variables in your code:


const apiKey = process.env.REACT_APP_API_KEY;
const apiUrl = process.env.REACT_APP_API_URL;
const env = process.env.REACT_APP_ENV;


In this example, we are assigning the values of the environment variables to three constants: apiKey, apiUrl, and env.

Step 3: Using environment variables

Now that you have access to your environment variables, you can use them in your code as needed. For example, you might use the apiKey and apiUrl variables to make API requests:


fetch(${apiUrl}/data, {
  headers: {
    'Authorization': Bearer ${apiKey}
  }
})
.then(response => response.json())
.then(data => console.log(data));


In this example, we are making a GET request to the apiUrl, passing the apiKey as an authorization header.

Alternative Solution: Using a package

If you prefer a more streamlined approach, you can use a package like “dotenv” to load your environment variables automatically. This package allows you to define your environment variables in a .env file and automatically loads them into the “process.env” object.

To use “dotenv”, first install it as a dependency:


npm install dotenv


Then, create a file called “setupEnv.js” in the root directory of your project and add the following code:


require('dotenv').config();


Finally, import and execute the “setupEnv.js” file in your main entry point (e.g., “index.js”):


import './setupEnv';


This will load the environment variables defined in the .env file into the “process.env” object, allowing you to access them in your code without explicitly calling “dotenv.config()”.

With this alternative solution, you can skip Step 2 and directly access your environment variables using the “process.env” object.

Conclusion

Adding an .env file to your React project is a simple and effective way to manage sensitive information and configuration variables. Whether you choose to manually access the environment variables or use a package like “dotenv”, implementing this practice will help keep your codebase secure and organized.

Remember to add the .env file to your .gitignore to ensure it is not committed to your version control system, as it contains sensitive information.