Overview

This skill teaches how to correctly expose environment variables in a Vite + React + TypeScript project. It covers the required VITE_ prefix, using import.meta.env, and documenting values in .env.example to keep config clear and safe.

How This Skill Works

Vite loads environment variables from .env files at build and dev time. Only vars starting with VITE_ are exposed to the client and are accessed in code via import.meta.env.VITE_SOME_KEY. For TypeScript, provide a vite-env.d.ts augmentation to type these vars.

When to Use It

• Setting different API base URLs for dev, staging, and production
• Toggling feature flags in the UI without code changes
• Configuring app title, theme, or analytics IDs per environment
• Documenting expected env vars with .env.example for new developers
• Ensuring sensitive secrets are not exposed in client code (recommend server-side storage)

Quick Start

1. Step 1: Add VITE_ prefixed keys to .env.local (e.g., VITE_API_BASE_URL=https://api.example.dev)
2. Step 2: Access them in code with import.meta.env.VITE_API_BASE_URL
3. Step 3: Add entries to .env.example and, if using TS, augment vite-env.d.ts

Best Practices

• Prefix every client-facing var with VITE_
• Access via import.meta.env, not process.env
• Document keys in .env.example with descriptions
• Provide vite-env.d.ts typings for VITE_* vars
• Avoid storing secrets in client env vars; use server-side storage or a secure proxy

Example Use Cases

• VITE_API_BASE_URL=https://api.example.dev
• VITE_APP_TITLE=MyApp
• VITE_ENABLE_ANALYTICS=true
• VITE_THEME=dark
• VITE_MAPS_API_KEY=public-key-xyz

Frequently Asked Questions