Environment Variables in React with Vite JS

Welcome to this comprehensive guide on Environment Variables in React using Vite JS. Let's dive into this exciting topic! 🎯

What are Environment Variables?

Environment variables are values that are stored outside of your application code and can be accessed by your application to configure its behavior at runtime. They are useful for storing sensitive data, such as API keys and database connections, that you don't want to hardcode in your application. 💡

Why Use Environment Variables in React with Vite JS?

Using environment variables in your React application with Vite JS has several advantages. For one, it allows you to keep sensitive information out of your code, improving security. Additionally, it enables you to manage configuration options for different environments, such as development and production, more easily. ✅

Setting Up Environment Variables in Vite JS

To set up environment variables in a Vite JS project, you'll need to:

Create a .env file in the root directory of your project.
Define your environment variables in the .env file. For example:

REACT_APP_API_KEY=your_api_key

Import and use the variables in your application.

jsx

import React from 'react';

const App = () => {
  const apiKey = process.env.REACT_APP_API_KEY;

  // Use the apiKey here
  return <div>{apiKey}</div>;
};

export default App;

📝 Note: Variables with the REACT_APP_ prefix will be available as properties on the process.env object.

Working with Different Environments

With Vite JS, you can specify different environment configurations by creating a vite.env.d directory in your project's root. Inside this directory, you can create separate files for each environment (e.g., development.env, production.env).

vite.env.d
├── development.env
└── production.env

Each environment file should contain the environment variables specific to that environment. The environment variables defined in the active environment file will be merged with those defined in the root .env file.

Best Practices for Managing Environment Variables

Keep sensitive information out of your version control system (.gitignore the .env file).
Use a .gitignore template to ensure you don't accidentally commit sensitive information.
Don't hardcode environment variables directly in your code. Instead, import them as shown earlier.