DEV Community

Mohamed Idris
Mohamed Idris

Posted on

Setting Up Environment Variables in Vite React Project - and - Important Things to Know About Using Environment Variables

#react #frontend #browser

Setting Up Environment Variables in Vite React Project

When building a React app with Vite, it's important to manage sensitive data like API keys securely, especially when you're pushing the code to a repository like GitHub. One way to handle this is by using environment variables. Let’s walk through how to set up and access environment variables in a Vite project.

1. Create the .env File

First, create a .env file in the root of your project (not in the src folder). This file will hold your environment variables.

Important: Ensure that the .env file is in the root of the project. This is a common mistake where the file might end up in the wrong directory.

2. Add the .env File to .gitignore

Before adding any sensitive data, make sure to add .env to your .gitignore file to prevent it from being committed to your GitHub repository.

In .gitignore:

# Add the .env file to ignore
.env
Enter fullscreen mode Exit fullscreen mode

3. Define Environment Variables

In the .env file, define your environment variables. Vite requires environment variables to start with VITE_ and be uppercase.

Example .env file:

VITE_UNSPLASH_API_ACCESS_KEY="123-456"
Enter fullscreen mode Exit fullscreen mode

4. Restart the Development Server

After creating or modifying the .env file, restart your development server so the new environment variables are loaded.

npm run dev
Enter fullscreen mode Exit fullscreen mode

5. Access Environment Variables in Your Code

Now, you can access the environment variable in your React code using import.meta.env.

Here’s how to access the VITE_UNSPLASH_API_ACCESS_KEY:

const searchUrl = `https://api.unsplash.com/search/photos?client_id=${import.meta.env.VITE_UNSPLASH_API_ACCESS_KEY}`;
Enter fullscreen mode Exit fullscreen mode

Important Things to Know About Using Environment Variables

While environment variables are an essential tool for managing sensitive data like API keys in a React project, it's important to understand their limitations and best practices. Here are some key points to keep in mind:

API Key Visibility:

Since we're working with frontend code, the API key can still be accessed from the Network Tab in the browser's developer tools. Anyone familiar with the dev tools can search for it in the console or network requests.

  • Tip: To truly hide sensitive values like an API key, you should use serverless functions (e.g., Netlify Functions). In this setup, the API key is stored and used on the server rather than being exposed in the frontend. The frontend makes a request to the serverless function, which then sends the request to the API with the key, keeping the API key hidden from the client-side.

GitHub and Public Repos:

Environment variables help to hide sensitive information from your source code when pushing to GitHub. Without environment variables, sensitive information like API keys might end up in your codebase and be exposed publicly.

Summary:

  • Set up environment variables in Vite by creating a .env file in the root of your project.
  • Access these variables in your React components using import.meta.env.
  • Always use the VITE_ prefix for the variable names.
  • Remember: Environment variables only hide sensitive data in your code when pushing to repositories; they can still be exposed in frontend apps. To secure API keys, consider using serverless functions.

Credits: John Smilga's react course

Top comments (0)