Environment Variables

Introduction

In the last two lessons, every API URL was written directly into the code: https://jsonplaceholder.typicode.com. That works for a tutorial, but real projects usually talk to different servers depending on context — a local development server, a staging server for testing, and a production server for real users. Hardcoding a URL means editing source code every time that changes.

Environment variables solve this by moving configuration values out of your code and into files that can change per environment without touching a single line of a component. This lesson covers how Vite (the build tool most modern React projects use) handles environment variables, and an important security rule you must never break.

Why Not Hardcode Values?

Hardcoding a value like an API base URL directly inside a component seems harmless at first, but it creates real problems as a project grows.

Environment Variables with Vite

Vite is the build tool that powers most modern React projects created today (via npm create vite@latest). It has built-in support for environment variables through .env files, with one important rule: any variable you want available in your React code must be prefixed with VITE_.

Creating a .env File

Create a file named .env in the root of your project, next to package.json. Each line defines one variable as a simple KEY=value pair.

VITE_API_URL=https://jsonplaceholder.typicode.com
VITE_APP_NAME=PrograMinds Tasks

Accessing Variables in Code

Inside your React code, Vite exposes environment variables through the special import.meta.env object, not through process.env like older Node-based tools.

import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

export function getTasks() {
  return api.get('/todos?_limit=5').then((res) => res.data);
}

https://jsonplaceholder.typicode.com

Now, changing the API URL for a different environment is a one-line edit in a .env file, not a search-and-replace across your entire codebase.

Different .env Files per Environment

Vite automatically supports multiple env files so that development and production can use different values without any extra configuration. This is done purely through file naming.

For example, .env.development might point VITE_API_URL at http://localhost:3001, while .env.production points the same variable at your real production API — with zero changes to your component code.

Security Warning: Client-Side Exposure

True secrets — a private API key that authorizes billing, a database connection string, a signing secret — belong on a backend server, never in client-side React code, regardless of how they are stored. Environment variables in a Vite app are for public configuration values only, like an API base URL or a public analytics ID.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Environment variables let you separate configuration from code, so the same React application can point at different servers or settings depending on where it runs, without editing source files. Vite makes this easy through .env files and the import.meta.env object — but the VITE_ prefix is also a reminder that anything exposed this way is visible to every visitor.

In this lesson, you learned why hardcoding values is risky, how to set up .env files with Vite, how to access variables safely, and the critical rule about never storing secrets client-side. Next, you will start designing your own custom components with well-thought-out prop APIs.