Frontend Delivery Env Management

When to use this skill

• Managing environment variables
• Configuring for different environments
• Handling secrets

Workflow

• Create .env files
• Use environment-specific configs
• Never commit secrets
• Validate env vars at startup
• Document required vars

Instructions

.env Files

# .env.local (not committed)
VITE_API_URL=http://localhost:3000

# .env.production
VITE_API_URL=https://api.example.com

Usage

const apiUrl = import.meta.env.VITE_API_URL;

Validation

const requiredEnvVars = ['VITE_API_URL'];
requiredEnvVars.forEach(key => {
  if (!import.meta.env[key]) {
    throw new Error(`Missing env var: ${key}`);
  }
});

Resources

• Prefix with VITE or NEXTPUBLIC_
• Never commit secrets
• Validate at startup