What are Environment Variables?

Environment variables let you store configuration values outside your code. They’re useful for:

  • API URLs
  • Public API keys
  • Test credentials

The Problem with Browser JavaScript

Regular browser JavaScript can’t access system environment variables directly. This means we need a way to include these values in our code.

Solutions

1. Config File (Without Bundler)

For simple projects we can use a config or constants file:

// config.js
export const CONFIG = {
 apiUrl: "https://api.example.com"
};

import { CONFIG } from './config.js';
const apiUrl = CONFIG.apiUrl;

Pros:

  • Simple to set up and use
  • Better than hard-coding values
  • Works without build tools

Cons:

  • Manual management for different environments
  • All values exposed in the code

2. Using Vite

Vite is a modern build tool that processes your code for the browser. It takes your JavaScript files, combines them, and handles features like environment variables.

Setting Up a Vite Project

  1. Create a new project:
npm create vite@latest my-project-name
  1. Select options:
Select a framework: › Vanilla
Select a variant: › JavaScript
  1. Navigate to project and install dependencies:
cd my-project-name
npm install

Setting Up Environment Variables

Create environment files:

.env                # base settings shared by the team
.env.development    # settings for development (npm run dev)
.env.production     # settings for production (npm run build)

Example:

Base settings in .env:

VITE_API_URL=https://api.example.com

Development override in .env.development:

VITE_API_URL=http://localhost:3000

Production override in .env.production:

VITE_API_URL=https://prod-api.example.com

When you run:

  • npm run dev: Uses .env, then .env.development overrides
  • npm run build: Uses .env, then .env.production overrides

Use the variables in your code:

const apiUrl = import.meta.env.VITE_API_URL;  // works
console.log(import.meta.env.SECRET_KEY);      // undefined

Important security note:

  • Only variables prefixed with VITE_ are exposed to your code
  • Only use VITE_ for values that can be public
  • Don’t use VITE_ for secrets (API keys, passwords)
  • Avoid VITE_BASE_URL as it’s reserved by Vite

Create a .env.example file to help other developers know what variables are needed:

# API Configuration
VITE_API_URL=https://example-api.com
VITE_PUBLIC_KEY=your-public-key-here

Add this file to your repository (not .gitignore) as documentation.

Best Practices

  1. Security:
    • Only use VITE_ for public values
    • Add .env to .gitignore
    • Create .env.example with dummy values
  2. Organization:
    • Use clear, descriptive variable names
    • Group related variables together

Additional Features

While we’re focusing on environment variables, Vite also handles things like TypeScript and Sass.

Using Environment Variables in React

If you create a React project with Vite, you access the variables the same way:

function App() {
 const apiUrl = import.meta.env.VITE_API_URL;
 
 return (
   <div>
     <h1>API URL: {apiUrl}</h1>
   </div>
 );
}

Video

How to use environment variables in E2E tests.

Video

Tags: