As a developer stepping into the React ecosystem, one of the first challenges you’ll face is protecting your API keys when pushing code to GitHub. While the solution seems straightforward — just use .env (environment variables), right? — there’s a subtle detail in Vite’s implementation that can leave you scratching your head for hours.

The Scenario

Picture this: You’re building your first React project, perhaps a movie database app using TMDB’s API. You’ve done everything by the book:

1. Created a `.env` file
2. Added it to `.gitignore`
3. In .env: Placed your api key string within
   e.g. VITE_API_KEY = “[API STRING HERE]”
4. Accessed it on the page you need it using `import.meta.env.VITE_API_KEY`

Yet, you keep getting that frustrating error:

GET https:/[API_WEB_LINK]?api_key=undefined 401 (Unauthorized)

The Root of the Problem

The issue isn’t in your code, but knowledge of project structure. Here’s the key insight: Vite requires your `.env` file to be in the same directory where you run your development server.

Consider this common project structure:
my-project/
├── .env
├── .gitignore
└── frontend/
├── src/
├── package.json
└── vite.config.js

If you’re running `npm run dev` from within the `frontend` directory (as recommended), Vite won’t be able to find the `.env` file in the parent directory. This is a deliberate design choice by Vite for security and clarity.

The Solution

Instead of restructuring your project, you can tell Vite exactly where to look for your .env file by configuring the envDir option in your vite.config.js:

import { defineConfig } from “vite”;
import react from “@vitejs/plugin-react”;
import { resolve } from “path”;

export default defineConfig({
 plugins: [react()],
 envDir: resolve(__dirname, ".."), // Tell Vite to look for .env one directory above
});

This elegant solution allows you to:

• Keep your .env file at the root level
• Maintain a clean project structure
• Access environment variables correctly in your React application

Why This Matters

This configuration highlights an important aspect of modern web development: the flexibility of build tools. While Vite has its defaults, it also provides ways to customize its behaviour to match your project’s needs. Understanding these configuration options can save you hours of debugging and prevent the need to compromise on your preferred project structure.

Best Practices Moving Forward

When setting up a new Vite React project:

• Decide on your preferred location for .env files early in development
• Configure vite.config.js accordingly using the envDir option
• Always prefix your Vite environment variables with VITE_
• Verify your .gitignore includes .env
• Remember that import.meta.env only works in Vite projects

By keeping these points in mind, you’ll save yourself from spending hours debugging what appears to be a simple configuration issue.