Environment Variables

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:

javascript

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

javascript

	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

Create a new project:

bash

	npm create vite@latest my-project-name

Select options:

bash

	Select a framework: › Vanilla
	Select a variant: › JavaScript

Navigate to project and install dependencies:

bash

	cd my-project-name
	npm install

Setting Up Environment Variables

Create environment files:

bash

	.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:

bash

	VITE_API_URL=https://api.example.com

Development override in .env.development:

bash

	VITE_API_URL=http://localhost:3000

Production override in .env.production:

bash

	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:

javascript

	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:

bash

	# 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

Security:

Only use VITE_ for public values
Add .env to .gitignore
Create .env.example with dummy values

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:

jsx

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