React - Access Environment Variables from dotenv (.env)

If you're building a React application, accessing environment variables can be a key component in the development process. By using environment variables, you can avoid hard-coding sensitive information like API keys, database credentials, and other configurations into your code. Instead, you can store them separately and reference them within your application through the use of environment variables.

In this blog post, we will explore how to use dot.env to access environment variables in your React application.

What is dotenv?

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. It's a popular tool used across a variety of programming languages including Node.js, Ruby, and Python, and it's an easy and secure way to manage environment variables. With dotenv, you can store configurations for each environment (development, staging, production) in a separate .env file, allowing you to easily switch between configurations.

Installation

To install dotenv, simply run the following command in your project directory:

npm install dotenv

Once you've installed dotenv, create a .env file in your project's root directory. This file will contain your environment variables.

API_KEY=123456789
SECRET_KEY=987654321

Next, create a new file in your project directory called .env.example. In this file, list out all the environment variables you need in your application. It's a good practice to include comments describing what each environment variable does.

# .env.example

API_KEY=
SECRET_KEY=

Make sure to add .env to your .gitignore file to prevent your environment variables from being committed to your version control system.

Accessing Environment Variables in React

Now that you have your environment variables set up, you can access them in your React application. To do this, you need to load your environment variables into the Node.js environment. This can be done by requiring dotenv at the top of your App.js file or in any file that requires the environment variables.

// App.js

require('dotenv').config();

function App() {
  return (
    <div>
      <h1>Your Environment Variables</h1>
      <ul>
        <li>API Key: {process.env.API_KEY}</li>
        <li>Secret Key: {process.env.SECRET_KEY}</li>
      </ul>
    </div>
  );
}

export default App;

In this example, we required dotenv at the top of our App.js file and then accessed our environment variables using the process.env object. You can reference your environment variables wherever you need them in your application, just like any other variable.

Conclusion

By using dotenv to manage your environment variables in your React application, you can keep your sensitive information secure and avoid hard-coding configurations into your code. Once you have your environment variables set up, accessing them in your application is easy with the process.env object. By following these best practices, you can build robust, secure, and easy-to-maintain React applications.