environment-sync

description

Synchronize environment variables between local development and Vercel deployments

Vercel Environment Sync

Sync Operation: $ARGUMENTS

Current Environment Analysis

Local Environment

• Environment files:
  • @.env.local (if exists)
  • @.env.development (if exists)
  • @.env.production (if exists)
  • @.env (if exists)
• Environment example: @.env.example (if exists)
• Vercel config: @vercel.json (if exists)

Project Status

• Vercel CLI status: !vercel --version 2>/dev/null || echo "Vercel CLI not installed"
• Current project: !vercel project ls 2>/dev/null | head -5 || echo "Not linked to Vercel project"
• Git status: !git status --porcelain | head -5

Environment Synchronization Strategy

1. Environment File Analysis

// Environment file structure analysis
interface EnvironmentConfig {
  development: Record<string, string>;
  preview: Record<string, string>;
  production: Record<string, string>;
}

const environmentFiles = {
  '.env.local': 'Local development overrides',
  '.env.development': 'Development environment',
  '.env.staging': 'Staging/preview environment', 
  '.env.production': 'Production environment',
  '.env': 'Default environment (committed to git)',
  '.env.example': 'Environment template (safe to commit)',
};

2. Vercel Environment Management

# List all environment variables for all environments
vercel env ls

# List environment variables for specific environment
vercel env ls --environment=production
vercel env ls --environment=preview
vercel env ls --environment=development

# Pull environment variables from Vercel
vercel env pull .env.vercel

# Add new environment variable
vercel env add [name] [environment]

# Remove environment variable
vercel env rm [name] [environment]

Synchronization Operations

1. Pull Environment Variables from Vercel

#!/bin/bash
# Pull environments from Vercel

echo "🔄 Pulling environment variables from Vercel..."

# Create backup of existing files
if [ -f .env.local ]; then
  cp .env.local .env.local.backup.$(date +%Y%m%d_%H%M%S)
  echo "📦 Backup created for .env.local"
fi

# Pull from Vercel (creates .env.local by default)
vercel env pull .env.local

if [ $? -eq 0 ]; then
  echo "✅ Successfully pulled environment variables"
  echo "📁 Variables saved to .env.local"
  
  # Show summary
  echo ""
  echo "📊 Environment Variables Summary:"
  echo "================================"
  grep -c "=" .env.local 2>/dev/null && echo "Total variables: $(grep -c "=" .env.local)"
  
  # List variable names (hide values for security)
  echo ""
  echo "🔑 Variable Names:"
  grep "^[A-Z]" .env.local | cut -d'=' -f1 | sort
else
  echo "❌ Failed to pull environment variables"
  exit 1
fi

2. Push Environment Variables to Vercel

#!/bin/bash
# Push environment variables to Vercel

echo "🚀 Pushing environment variables to Vercel..."

# Check if environment files exist
ENV_FILES=(".env.production" ".env.staging" ".env.development")
FOUND_FILES=()

for file in "${ENV_FILES[@]}"; do
  if [ -f "$file" ]; then
    FOUND_FILES+=("$file")
  fi
done

if [ ${#FOUND_FILES[@]} -eq 0 ]; then
  echo "❌ No environment files found to push"
  echo "💡 Expected files: ${ENV_FILES[*]}"
  exit 1
fi

# Push each environment file
for file in "${FOUND_FILES[@]}"; do
  echo "📤 Processing $file..."
  
  # Determine target environment
  if [[ "$file" == *"production"* ]]; then
    ENV="production"
  elif [[ "$file" == *"staging"* ]]; then
    ENV=  
   [[  == ** ]]; 
    ENV=
  
    ENV=  
  
  
   
  
  
   IFS=  -r key value; 
    
     [[ -z  ||  =~ ^#.* ]]; 
      
    
    
    
    value=$(  | sed  | sed )
    
     
      | vercel  add   --force
    
   < 
  
   
   


 

3. Environment Validation

// Environment validation script
interface ValidationRule {
  name: string;
  required: boolean;
  pattern?: RegExp;
  description: string;
}

const validationRules: ValidationRule[] = [
  {
    name: 'DATABASE_URL',
    required: true,
    pattern: /^(postgresql|mysql|sqlite):\/\/.+/,
    description: 'Database connection string',
  },
  {
    name: 'NEXTAUTH_SECRET',
    required: true,
    pattern: /.{32,}/,
    description: 'NextAuth.js secret key (min 32 characters)',
  },
  {
    name: 'NEXTAUTH_URL',
    required: true,
    pattern: /^https?:\/\/.+/,
    description: 'NextAuth.js canonical URL',
  },
  {
    name: 'API_KEY',
    required: false,
    pattern: /^[A-Za-z0-9_-]+$/,
    description: 'API key for external services',
  },
];

function validateEnvironment(envFile: string):  {
   : [] = [];
   : [] = [];
   env = (envFile);
  
  
  validationRules.( {
     value = env[rule.];
    
     (rule. && !value) {
      errors.();
      ;
    }
    
     (value && rule. && !rule..(value)) {
      errors.();
    }
  });
  
  
  .(env).( {
    
     (value ===  || value === ) {
      warnings.();
    }
    
    
     (key.() || key.()) {
       (value. < ) {
        warnings.();
      }
    }
  });
  
   {
    : errors. === ,
    errors,
    warnings,
  };
}

 (): <, > {
  
   {};
}

  {
  : ;
  : [];
  : [];
}

4. Environment Backup and Restore

#!/bin/bash
# Backup and restore environment variables

BACKUP_DIR=".env-backups"
TIMESTAMP=$(date +%Y%m%d_%H%M%S)

backup_environment() {
  echo "📦 Creating environment backup..."
  
  mkdir -p "$BACKUP_DIR"
  
  # Backup local files
  for file in .env.local .env.development .env.staging .env.production; do
    if [ -f "$file" ]; then
      cp "$file" "$BACKUP_DIR/${file}.${TIMESTAMP}"
      echo "✅ Backed up $file"
    fi
  done
  
  # Backup Vercel environment variables
  echo "📤 Backing up Vercel environment variables..."
  
  for env in production preview development; do
    vercel env ls --environment="$env" > "$BACKUP_DIR/vercel-${env}.${TIMESTAMP}.txt"
    echo "✅ Backed up Vercel $env environment"
  done
  
  echo 
   -la  | grep 
}

() {
   backup_timestamp=
  
   [ -z  ]; 
     
     
     -1  | grep -E  |  -d -f3 |  -u
     1
  
  
   
  
  
   file  .env.local .env.development .env.staging .env.production; 
    backup_file=
     [ -f  ]; 
        
       
    
  
  
   
}


  
  backup)
    backup_environment
    ;;
  restore)
    restore_environment 
    ;;
  *)
     
     1
    ;;

Advanced Synchronization Features

1. Environment Diff and Comparison

// Environment comparison tool
interface EnvironmentDiff {
  added: string[];
  removed: string[];
  modified: Array<{
    key: string;
    local: string;
    remote: string;
  }>;
  unchanged: string[];
}

function compareEnvironments(
  local: Record<string, string>,
  remote: Record<string, string>
): EnvironmentDiff {
  const diff: EnvironmentDiff = {
    added: [],
    removed: [],
    modified: [],
    unchanged: [],
  };
  
  const allKeys = new Set([...Object.keys(local), ...Object.keys(remote)]);
  
  allKeys.forEach(key => {
    if (!(key in local)) {
      diff.added.push(key);
    } else if (!(key  remote)) {
      diff..(key);
    }   (local[key] !== remote[key]) {
      diff..({
        key,
        : local[key],
        : remote[key],
      });
    }  {
      diff..(key);
    }
  });
  
   diff;
}


 ():  {
   report = ;
  
   (diff.. > ) {
    report += ;
    diff..( {
      report += ;
    });
    report += ;
  }
  
   (diff.. > ) {
    report += ;
    diff..( {
      report += ;
    });
    report += ;
  }
  
   (diff.. > ) {
    report += ;
    diff..( {
      report += ;
      report += ;
      report += ;
    });
  }
  
   (diff.. > ) {
    report += ;
    report += ;
  }
  
   report;
}

 ():  {
  
   (value. <= ) {
     .(value.);
  }
   ;
}

2. Environment Template Generation

// Generate .env.example from existing environment
function generateEnvExample(envFile: string): string {
  const env = readEnvironmentFile(envFile);
  let template = '# Environment Variables Template\n';
  template += '# Copy this file to .env.local and fill in the values\n\n';
  
  const categories = categorizeVariables(env);
  
  Object.entries(categories).forEach(([category, variables]) => {
    template += `# ${category.toUpperCase()}\n`;
    variables.forEach(({ key, description, example }) => {
      if (description) {
        template += `# ${description}\n`;
      }
      template += `${key}=${example || 'your-value-here'}\n\n`;
    });
  });
  
  return template;
}

function categorizeVariables(env: Record<string, string>) {
  const categories: Record<string, Array<{
    key: string;
    description?: string;
    ?: ;
  }>> = {
    : [],
    : [],
    : [],
    : [],
  };
  
  .(env).( {
     (key.() || key.()) {
      categories..({ key, : (key) });
    }   (key.() || key.()) {
      categories..({ key, : (key) });
    }   (key.() || key.()) {
      categories..({ key, : (key) });
    }  {
      categories..({ key, : (key) });
    }
  });
  
   categories;
}

 ():  {
   (key === )  ;
   (key === )  ;
   (key === )  ;
   (key === )  ;
   ;
}

 ():  {
   (key === )  ;
   (key === )  ;
   (key === )  ;
   ;
}

 ():  {
   ;
}

 ():  {
   ;
}

3. Security and Validation

#!/bin/bash
# Security checks for environment variables

security_check() {
  echo "🔐 Running security checks on environment variables..."
  
  local issues=0
  
  # Check for common security issues
  for file in .env.local .env.development .env.staging .env.production; do
    if [ ! -f "$file" ]; then
      continue
    fi
    
    echo "🔍 Checking $file..."
    
    # Check for weak secrets
    while IFS='=' read -r key value; do
      if [[ -z "$key" || "$key" =~ ^#.* ]]; then
        continue
      fi
      
      # Remove quotes
      value=$(echo "$value" | sed 's/^"\(.*\)"$/\1/' | sed "s/^'\(.*\)'$/\1/")
      
      # Check for placeholder values
      if [[ "$value" == *"your-"* || "$value" == *"change-me"* || "$value" == *"replace-me"* ]]; then
         
        ((issues++))
      
      
      
       [[  =~ (SECRET|PRIVATE|KEY|TOKEN) ]]; 
         [  -lt 16 ]; 
           
          ((issues++))
        
      
      
      
       [[  == ** &&  =~ localhost ]]; 
         
        ((issues++))
      
      
     < 
  
  
  
   [ -f .gitignore ]; 
     ! grep -q  .gitignore; 
       
      ((issues++))
    
     ! grep -q  .gitignore; 
       
      ((issues++))
    
  
     
    ((issues++))
  
  
   
   [  -eq 0 ]; 
     
  
     
     1
  
}

security_check

Automation and Integration

1. GitHub Actions Integration

# .github/workflows/env-sync.yml
name: Environment Sync

on:
  push:
    branches: [main, develop]
    paths: ['.env.example', '.env.*']
  
  workflow_dispatch:
    inputs:
      action:
        description: 'Sync action'
        required: true
        default: 'validate'
        type: choice
        options:
        - validate
        - pull
        - push

jobs:
  env-sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Install Vercel CLI
        run: npm i -g vercel@latest
      
      - name: Link to Vercel
        run: vercel link    
      
         
               
               
         
           
               
         
           
         

2. Development Workflow Integration

#!/bin/bash
# Pre-commit hook for environment validation

echo "🔍 Validating environment variables..."

# Check if environment files are properly configured
if [ -f .env.local ]; then
  echo "✅ .env.local exists"
else
  echo "⚠️  .env.local not found"
  if [ -f .env.example ]; then
    echo "💡 Copy .env.example to .env.local and configure your variables"
  fi
fi

# Validate environment structure
node scripts/validate-env.js

if [ $? -ne 0 ]; then
  echo "❌ Environment validation failed"
  exit 1
fi

echo "✅ Environment validation passed"

Comprehensive Sync Operations

Implement complete environment synchronization workflow with validation, backup, security checks, and automation integration for seamless development and deployment processes.

<function_calls> [{"content": "Analyze hook system and context monitoring capabilities", "status": "completed"}, {"content": "Design context threshold detection mechanism", "status": "completed"}, {"content": "Create hook script for automatic compact + clear sequence", "status": "pending"}, {"content": "Configure hook in settings.json with proper event triggers", "status": "pending"}, {"content": "Test hook execution and threshold detection", "status": "pending"}, {"content": "Add markdown copy button to Supabase blog post", "status": "completed"}, {"content": "Write Claude Code + Next.js and Vercel Integration article", "status": "completed"}, {"content": "Create Next.js Architecture Expert agent", "status": "completed"}, {"content": "Create Vercel Deployment Specialist agent", "status": "completed"}, {"content": "Create React Performance Optimizer agent", "status": "completed"}, {"content": "Create Next.js app scaffolding command", "status": "completed"}, {"content": "Create Vercel deployment optimization command", "status": "completed"}, {"content": "Create component generator command", "status": "completed"}, {"content": "Create API route tester command", "status": "completed"}, {"content": "Create bundle analyzer command", "status": "completed"}, {"content": "Create middleware creator command", "status": "completed"}, {"content": "Create edge function generator command", "status": "completed"}, {"content": "Create performance audit command", "status": "completed"}, {"content": "Create environment sync command", "status": "completed"}, {"content": "Create migration helper command", "status": "in_progress"}]