Environment variables are a crucial aspect of software development, allowing you to separate configuration from code and keep sensitive information secure. In React applications, environment variables can be used to store API keys, database credentials, and other secrets that should not be committed to version control.
In this tutorial, we will explore how to use environment variables in React applications, with a focus on Create React App (CRA) projects.
Creating an Environment Variable File
To start using environment variables in your React application, you need to create a file named .env in the root directory of your project. This file should be at the same level as package.json.
In the .env file, you can define your environment variables as key-value pairs. For example:
REACT_APP_API_KEY='my-secret-api-key'
Note that every variable defined in the .env file must start with REACT_APP_. This is a convention used by Create React App to distinguish between environment variables and other variables.
Accessing Environment Variables
Once you have created your .env file, you can access the environment variables in your React components using the process.env object. For example:
const apiKey = process.env.REACT_APP_API_KEY;
You can then use the apiKey variable in your code as needed.
Using Environment Variables with Fetch API
A common use case for environment variables is to store API keys or other credentials that need to be passed to an API endpoint. Here’s an example of how you might use an environment variable with the Fetch API:
fetch(`https://api.example.com/endpoint?apiKey=${process.env.REACT_APP_API_KEY}`)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Restarting the Development Server
After making changes to your .env file, you need to restart the development server for the changes to take effect. You can do this by running npm start or yarn start in your terminal.
Ignoring Environment Variable Files in Git
To keep your environment variable files secure, it’s a good idea to add them to your .gitignore file. This will prevent the files from being committed to version control and reduce the risk of sensitive information being exposed.
Create React App automatically adds .env files to .gitignore, so you don’t need to worry about this step if you’re using CRA.
Environment Variable File Priority
If you have multiple environment variable files (e.g., .env.development.local, .env.development, .env.local, .env), Create React App will use them in the following order:
npm start:.env.development.local,.env.development,.env.local,.envnpm run build:.env.production.local,.env.production,.env.local,.envnpm test:.env.test.local,.env.test,.env
This allows you to define environment variables that are specific to a particular environment or configuration.
Conclusion
In this tutorial, we’ve covered the basics of using environment variables in React applications. By following these best practices, you can keep your sensitive information secure and separate your configuration from your code.
Remember to always restart the development server after making changes to your .env file, and make sure to add your environment variable files to .gitignore to prevent them from being committed to version control.