React Environment Variables

In the last lesson, React Organizing API Calls, you put your base URL in one file. Now we’ll move that URL and other config out of the code entirely, using environment variables.

🤔 Why do we need environment variables?

Here’s the pain. Some values change depending on where the app runs, and hardcoding them causes trouble.

• The API URL is different on your computer (localhost) versus the live website.
• You don’t want to edit code every time you switch between local and production.
• Some config, like an API key for a third-party service, shouldn’t be written directly in the source.
• Different team members or environments may need different settings.

So environment variables let you keep these values outside the code, in a file that’s easy to change per environment. The code reads them, instead of containing them.

🐍 What is an environment variable?

Let’s define it plainly.

• An environment variable is a setting that lives outside your code, in the environment the app runs in.
• You store them in a special file, usually called .env, as simple NAME=value lines.
• Your code reads them at build time, so the same code can use different values in different places.

Think of it like a settings file. The program stays the same, but the settings file decides the details, like which server to talk to.

🧩 Creating a .env file

You put your variables in a .env file at the root of your project. With Vite (the common React build tool), variable names must start with VITE_.

# .env  (at the project root)
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My Cool App

Read the rules here.

• Each line is NAME=value, with no quotes needed and no spaces around the =.
• With Vite, the name must start with VITE_, or your app can’t read it.
• The VITE_ prefix is Vite’s way of marking which variables are safe to expose to the browser code.

📖 Reading the variable in code

You read a Vite environment variable with import.meta.env.VITE_NAME.

const BASE_URL = import.meta.env.VITE_API_URL;

export async function request(path) {
  const res = await fetch(`${BASE_URL}${path}`);
  return res.json();
}

Walk through what changed.

• Instead of hardcoding the URL, we read import.meta.env.VITE_API_URL.
• That value comes from the .env file, so it’s set outside the code.
• To point at a different server, you change .env, not this file.
• The same code now works locally and in production, just with different .env values.

🔒 Don’t commit secrets, and know what’s public

This is the most important safety point. In a front-end React app, environment variables are not truly secret.

• The build bundles these values into the JavaScript the browser downloads.
• So anyone can open the browser tools and read them. They are public.
• That’s fine for things like the API URL or app name, which aren’t secret anyway.
• But never put real secrets here, like a private API key or a database password. Those belong on a backend server, not in front-end code.

You should also keep the .env file out of version control, so local settings don’t get shared by accident.

.env

So .env is git-ignored, and you typically share a .env.example (with blank or dummy values) so teammates know which variables to set.

⚠️ Common Mistakes

The top mistake with Vite is forgetting the VITE_ prefix, so the variable comes back undefined.

# ❌ no VITE_ prefix - Vite won't expose it, so it's undefined in code
API_URL=https://api.example.com

# ✅ with the prefix - readable as import.meta.env.VITE_API_URL
VITE_API_URL=https://api.example.com

Keep these in mind.

• Don’t forget the VITE_ prefix (in Vite projects), or the variable is undefined.
• Don’t put real secrets in front-end env vars; they end up public in the bundle.
• Don’t commit .env to git; add it to .gitignore and share a .env.example instead.
• Restart the dev server after changing .env; the values are read at startup.

✅ Best Practices

A few habits for environment variables.

• Keep config like the API URL in .env, not hardcoded in your code.
• Use the right prefix for your tool (VITE_ for Vite) and read with import.meta.env.
• Only store non-secret config in front-end env vars; keep real secrets on a backend.
• Git-ignore .env, and provide a .env.example listing the needed variables.

🧩 What You’ve Learned

• ✅ Environment variables keep config like the API URL outside your code, in a .env file
• ✅ The same code can use different values in different environments (local vs production)
• ✅ In Vite, variable names need the VITE_ prefix and are read with import.meta.env.VITE_NAME
• ✅ Front-end env vars are NOT secret; they end up in the browser bundle and users can read them
• ✅ Use them for non-secret config; keep real secrets on a backend server
• ✅ Git-ignore .env, share a .env.example, and restart the dev server after changes

🚀 What’s Next?

Now your config lives safely outside your code. Next we’ll tidy up the small helper functions your app uses everywhere, by collecting reusable utility functions in one place.

React Reusable Utility Functions