Lesson 32 — Environment Variables in React

by

🧭 Introduction

In real-world React applications, we often work with:

  • API base URLs
  • Secret keys
  • Environment-specific settings

Hardcoding these values directly in your code is unsafe and unprofessional.
To solve this, React provides Environment Variables.

In this lesson, you will learn:

  • What environment variables are
  • Why they are important
  • How to use environment variables in React
  • Difference between development & production variables
  • Best practices and common mistakes

❓ What are Environment Variables?

Environment Variables are:

Special variables used to store configuration values outside your source code.

Examples:

  • API URLs
  • Feature flags
  • Environment names
  • Analytics keys

🧠 Why Use Environment Variables?

Without environment variables ❌

  • API keys exposed in code
  • Difficult to change config
  • Risky for production

With environment variables ✅

  • Secure configuration
  • Easy environment switching
  • Clean and maintainable code

🧩 Environment Variables in React (Important Rule)

In React:

Environment variables must start with REACT_APP_

Example:

REACT_APP_API_URL=https://api.example.com

🛠 Step 1: Create .env File

In your project root, create a file:

.env

📄 Example .env File

REACT_APP_API_URL=https://jsonplaceholder.typicode.com
REACT_APP_APP_NAME=CodeSanskriti React Course

🧠 Step 2: Use Environment Variables in React

You can access environment variables using:

process.env.REACT_APP_API_URL

📄 Example Usage

const apiUrl = process.env.REACT_APP_API_URL;

fetch(`${apiUrl}/users`)
  .then(res => res.json())
  .then(data => console.log(data));

🔄 Restart Required (Important!)

After creating or updating .env file:

You must restart the React development server

npm start

🧩 Environment Variables with Axios

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

export default api;

✔ Clean
✔ Reusable
✔ Secure

🧠 Environment Variables for Multiple Environments

You can create different .env files:

.env
.env.development
.env.production

Example:

REACT_APP_API_URL=https://api.dev.example.com


REACT_APP_API_URL=https://api.example.com

React automatically loads the correct file.

🔐 What Should NOT Be Stored in Environment Variables?

❌ User passwords
❌ Private keys (frontend is public)
❌ Sensitive secrets

👉 Environment variables in React are not truly secret.

⚠ Common Mistakes

❌ Forgetting REACT_APP_ prefix
❌ Not restarting dev server
❌ Committing .env file to Git
❌ Using environment variables for secrets

🎯 Best Practices

✅ Use env variables for config, not secrets
✅ Add .env to .gitignore
✅ Use meaningful variable names
✅ Centralize API config
✅ Use env variables with Axios

❓ FAQs — Environment Variables in React

🔹 Are React environment variables secure?

No. They are visible in the browser. Use backend for secrets.

🔹 Can I change env variables without rebuilding?

No. React needs rebuild/restart.

🔹 Why prefix is required?

To prevent accidental exposure of system variables.

🔹 Can I use env variables in production?

Yes, but they are bundled during build time.

🧠 Quick Recap

✔ Environment variables store config values
✔ Must start with REACT_APP_
✔ Useful for API URLs & app config
✔ Improves security & maintainability

🎉 Conclusion

Environment variables are a must-have feature for professional React applications. They help you separate configuration from code, making your app secure, flexible, and production-ready.

With this lesson, you have completed SECTION 6 — API Integration successfully 🚀

✅ Next Section Begins

SECTION 7 — Styling in React

👉 Next Lesson:
Lesson 33 — CSS in React

Leave a Comment