Table of Contents
In a React.js project, the .env
file is typically used to store environment variables. Environment variables are used to configure various aspects of your application, such as API keys, database connections, and other settings that may change between development and production environments. By keeping these values in a .env
file. you can easily manage configuration for different environments and keep sensitive information secure & safe.
What are Environment Variables?
Environment variables are a fundamental component of development in ReactJS. They are variables that are defined outside of your application and can be used within your application. Consider them as invisible hands, delivering essential information to your applications in a secure, efficient, and organized manner.
Here’s how you can use a .env
file in a React.js project
- Create an
.env
file: In the root directory of your React project, create a file named.env
. You can create this file manually or by using a command-line tool. - Define environment variables: In the
.env
file, you can define environment variables using theKEY=VALUE
syntax.
Create environment variables
REACT_APP_API_KEY=your-api-key
REACT_APP_API_URL=your-api-url
Make sure to prefix your environment variable names with REACT_APP_
when working with React. This is a requirement to ensure that React can access these variables.
Access environment variables
You can access these environment variables in your JavaScript code by using process.env
.
const apiKey = process.env.REACT_APP_API_KEY;
const apiUrl = process.env.REACT_APP_API_URL;
console.log(`API Key: ${apiKey}`);
console.log(`API URL: ${apiUrl}`);
Loading environment variables: Environment variables defined in the .env
file will be automatically loaded when you start your React application using react-scripts
(e.g., with npm start
or yarn start
). You don’t need to manually load the .env
file in your code.
Please note that you should not commit your .env
file to version control (e.g., Git) to keep sensitive information secure. You can include it in your .gitignore
file to ensure it’s not accidentally committed.