What are environment variables?
Environment variables are key value pairs that store configuration of your application and they determine how your application behaves in different environments. They are stored in outside of the source code, and live in the .env file.
An environment variable is provided by the environment in which the code is running, and developers can use then where they are needed within the code.
In other words, if you have a variable that would be used repeatedly, instead of repeating code within your source code, you can store it in a .env file, and the application then reads this variable from the .env file.
Environment variables are commonly used to store API keys. When working with an API, the provider provides a key to connect their service to your application.
To secure the API key, and protects it from being seen, instead of hard coding and storing it within a source file which will be pushed to a public repository, you should store it inside an environment variable.
Environment variables is used for data that changes whether it running in production, development or staging, and it allows developers to run application in different environments without changing their code.
Common use cases of environment variables
Used to configure application environment.
Used to store sensitive information such as API key, tokens, or password.
Used to store HTTP port for the application to listen to
Used to store API endpoints.
Benefits of Environment Variable
Prevent Hardcoding Sensitive Information: Saving secret tokens, URL links, API keys directly in your code poses a risk if the code is made public and compromised. Environment variables store sensitive values outside your code which can prevent them from being exposed to security risks.
Secure Management without Code Changes: Environment variables allows developers switch between environments like development, testing or production an change credentials without touching your code which leads to a cleaner workflow.
Secret Handling in Production: When an application is pushed to production, environment variables can be made secure by using secret management tools like HashiCorp vault to add an extra layer of security including encryption and control over who has access to the data, audit logs, and so on.
Reduces Risk of Exposing Sensitive Data: When an error occurs that exposes critical information such as committing code to a public repository, using environment variables with other secure management practices reduces the chance of the exposure leading to security breaches.
Limitations of Environment Variables
Security Risk: Environment variables can be exposed to security risk if best practices aren’t followed. For example, if a developer logs the entire environment variables to a monitoring tool, anyone with access can see the sensitive information.
No Central Audit: Environment variables store values in system memory or configuration, and they do not keep any record of who created them, changed or edited them, so when a secret key is leaked it is difficult to track where it is coming from.
Pushing .env File by Mistake: If you push a .env file by mistake, it becomes exposed. To fix the error, you can quickly remove the file from Git history and then change the exposed keys.
How Environment Variables are used in a React App
React has built-in support for environment variable, so you do not have to install any package and react reads the variables from the .env files without requiring any setup.
Environment variables are written in .env file created in the root directory of an application.
To create a custom variable you must use the prefix REACT_APP_
Inside the .env file, each line defines a variable with the format
REACT_APP_VARIABLE_NAME = value as shown in the image below.
If you use VITE, it is similar to CREATE REACT APP. Instead of REACT_APP_, Its prefix is VITE_
E.g., VITE_API_URL_KEY= value (API key).
Note: You do not have to add APP after VITE_ when naming variables, it isn’t necessary, the most important is the prefix VITE_
To access these variables using CREATE REACT APP, you have to use process.env.REACT_APP_ the variable name like so;
process.env.REACT_APP_API_KEY
For example, if you want to make an API call, you would use the API URL in your project like so;
const apiUrl = process.env.REACT_APP_API_URL (Remember that the url is stored in the .env file)
And for Vite, you have to use import.meta.env. VITE_API_KEY to access stored variables.
Note: The way environment variable is used in the frontend is different from the backend environment (e.g., Node.js). If you’re using environment variable for the frontend, there are rules you have to follow.
The naming rules and conventions include:
Variable name should start with REACT_APP_ or VITE_
Variables are embedded in the build, therefore, do not store secrets like private JWT secret, tokens, or database passwords in the .env file.
Environment Variable in Node Environment
If you are working with the backend and using Node.js, you create the environment variable file in the server root folder of your project.
