.env.development ❲HD × 720p❳

# .env.development NEXT_PUBLIC_GOOGLE_MAPS_KEY=dev_test_key_123 DATABASE_URL="postgresql://user@localhost:5432/dev_db" Vite loads .env.development when you run vite or vite build --mode development . Variables must be prefixed with VITE_ .

# docker-compose.yml version: '3.8' services: api: build: . env_file: - .env.development ports: - "$PORT:3000" Now, running docker-compose up automatically injects your dev variables. You can create scripts that modify behavior based on the presence of .env.development . .env.development

A basic .env.development file looks like this: env_file: -

const z = require('zod'); const envSchema = z.object( API_URL: z.string().url(), PORT: z.string().transform(Number).default('3000'), DEBUG_MODE: z.enum(['true', 'false']).transform(v => v === 'true') ); A user can open DevTools and see your REACT_APP_ variables

// package.json

const env = envSchema.parse(process.env); Here is the golden rule: Anything in a browser-facing .env.development is public. A user can open DevTools and see your REACT_APP_ variables. Never, ever put an admin password, database URI, or private key in a frontend .env.development file. Use a backend proxy instead. Common Pitfalls and How to Fix Them Even experienced developers fall into these traps. Let's troubleshoot the most common problems. Pitfall 1: "My .env.development variables are not loading." Diagnosis: You likely changed the file after the server started. Most dev servers (Webpack, Vite) only read environment files at startup.