How does Vercel handle environment variables and configuration management?

How does Vercel handle environment variables and configuration management?

Vercel provides a comprehensive environment variable and configuration management system that allows developers to securely manage configuration information across different environments.

Environment Variable Management

1. Environment Variable Types

Vercel supports three main types of environment variables:

• Production: Used for production deployments, only code merged into the main branch can access
• Preview: Used for preview deployments, accessible to all Pull Requests and branches
• Development: Used for local development, accessed through Vercel CLI

2. Setting Environment Variables

Environment variables can be set through the following methods:

Through Vercel Dashboard:

1. Go to project settings
2. Select "Environment Variables"
3. Add variable name and value
4. Select applicable environment (Production, Preview, Development)

Through Vercel CLI:

bash
vercel env add MY_API_KEY production
vercel env add MY_API_KEY preview
vercel env add MY_API_KEY development

Through vercel.json configuration file:

json
{
  "env": {
    "MY_API_KEY": "@my-api-key"
  },
  "build": {
    "env": {
      "BUILD_TIME_VAR": "value"
    }
  }
}

3. Accessing Environment Variables

Environment variables can be accessed in code through process.env:

javascript
const apiKey = process.env.MY_API_KEY;

Configuration Management

1. vercel.json Configuration File

vercel.json is Vercel's project configuration file that can define build, routing, redirect, and other settings:

json
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "create-react-app",
  "regions": ["iad1"],
  "functions": {
    "api/**/*.js": {
      "memory": 1024,
      "maxDuration": 10
    }
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ]
}

2. Framework Auto-Detection

Vercel can automatically detect and configure common frontend frameworks:

• Next.js
• React (Create React App)
• Vue.js
• Angular
• Nuxt.js
• Gatsby
• SvelteKit

For auto-detected frameworks, manual vercel.json configuration is usually not required.

3. Build Configuration

Build Command: Define how to build the project

json
{
  "buildCommand": "npm run build"
}

Output Directory: Specify the directory for build artifacts

json
{
  "outputDirectory": "dist"
}

Install Command: Customize dependency installation command

json
{
  "installCommand": "npm ci"
}

Best Practices

1. Security

• Never commit sensitive information to the code repository
• Use environment variables to store API keys, database connection strings, and other sensitive information
• Regularly rotate sensitive API keys and tokens

2. Environment Isolation

• Use different configurations for different environments
• Production environment uses production databases and API endpoints
• Preview environment uses test resources

3. Default Value Handling

Provide default values for environment variables in code:

javascript
const apiUrl = process.env.API_URL || 'https://api.example.com';

4. Type Checking

Use TypeScript or other type checking tools to ensure type safety for environment variables:

typescript
const API_URL = process.env.API_URL as string;
const PORT = parseInt(process.env.PORT || '3000', 10);

Common Issues

1. Environment Variables Not Taking Effect

Ensure:

• Variables are correctly set in the corresponding environment
• Redeploy the project to apply new environment variables
• Check if variable name case is correct

2. Local Development Access to Environment Variables

Use Vercel CLI to pull environment variables locally:

bash
vercel env pull .env.local

3. Environment Variable Length Limit

Vercel has length limits on environment variables. For large configurations, consider using configuration files or environment variable management services.