Skip to content

VERCEL_DEPLOYMENT_GUIDE.md

Latest commit

 

History

History
154 lines (115 loc) · 4.48 KB

VERCEL_DEPLOYMENT_GUIDE.md

File metadata and controls

154 lines (115 loc) · 4.48 KB

Vercel Deployment Guide for PHcoder Blog

This guide will help you deploy your blog with email notifications on Vercel.

🚀 Step 1: Deploy to Vercel

  1. Push your code to GitHub
  2. Connect to Vercel: Go to vercel.com and import your repository
  3. Deploy: Vercel will automatically deploy your React app

🔧 Step 2: Set Up Environment Variables in Vercel

Option A: Using Vercel Dashboard (Recommended)

  1. Go to your Vercel project dashboard
  2. Navigate to Settings → Environment Variables
  3. Add these environment variables:

Required Variables:

# Gmail SMTP Configuration
REACT_APP_GMAIL_USER=phcoder.blog@gmail.com
REACT_APP_GMAIL_APP_PASSWORD=your-16-character-app-password

# Optional: SendGrid Configuration (for production)
REACT_APP_SENDGRID_API_KEY=your-sendgrid-api-key
REACT_APP_SENDGRID_FROM_EMAIL=phcoder.blog@gmail.com

Option B: Using Vercel CLI

  1. Install Vercel CLI:

    npm i -g vercel

  2. Login to Vercel:

    vercel login

  3. Add environment variables:

    vercel env add REACT_APP_GMAIL_USER
vercel env add REACT_APP_GMAIL_APP_PASSWORD
vercel env add REACT_APP_SENDGRID_API_KEY

🔑 Step 3: Get Your Gmail App Password

  1. Enable 2-Factor Authentication on your Gmail account

  2. Generate App Password:

  3. Add to Vercel:

    • Go to your Vercel project → Settings → Environment Variables
    • Add REACT_APP_GMAIL_APP_PASSWORD with your app password

📧 Step 4: Test Email Notifications

Test Welcome Emails:

  1. Visit your deployed blog
  2. Subscribe to newsletter with a test email
  3. Check if welcome email is received

Test Blog Notifications:

  1. Login to admin dashboard
  2. Create a new blog post
  3. Check if subscribers receive notifications

🔍 Step 5: Monitor and Debug

Check Vercel Logs:

  1. Go to your Vercel project
  2. Navigate to Functions → Logs
  3. Look for email sending logs

Browser Console:

  1. Open browser developer tools
  2. Check console for email logs
  3. Look for success/error messages

🛠️ Troubleshooting

If emails aren't sending:

  1. Check Environment Variables:

    • Verify all variables are set in Vercel
    • Make sure variable names start with REACT_APP_

  2. Check Gmail App Password:

    • Ensure 2FA is enabled
    • Verify app password is correct
    • Check Gmail account settings

  3. Check Vercel Logs:

    • Look for error messages
    • Verify function execution

Common Issues:

  • "Invalid credentials": Double-check app password
  • "Environment variable not found": Restart deployment
  • "Function timeout": Check email service configuration

📊 Environment Variables Reference

Variable Description Required Example
REACT_APP_GMAIL_USER Gmail address for sending emails ✅ phcoder.blog@gmail.com
REACT_APP_GMAIL_APP_PASSWORD Gmail app password ✅ abcd efgh ijkl mnop
REACT_APP_SENDGRID_API_KEY SendGrid API key (optional) ❌ SG.xxx...
REACT_APP_SENDGRID_FROM_EMAIL SendGrid sender email ❌ phcoder.blog@gmail.com

🔒 Security Best Practices

  1. Never commit environment variables to Git
  2. Use app passwords instead of regular passwords
  3. Rotate app passwords regularly
  4. Monitor email sending for abuse
  5. Set up email delivery monitoring

🎯 Production Recommendations

For High Volume:

  • Use SendGrid instead of Gmail SMTP
  • Set up email analytics
  • Monitor delivery rates
  • Implement rate limiting

For Better Deliverability:

  • Verify your domain with email providers
  • Set up SPF/DKIM records
  • Monitor spam complaints
  • Use professional email templates

✅ Success Checklist

  • Vercel deployment successful
  • Environment variables configured
  • Gmail app password generated
  • Welcome emails working
  • Blog notifications working
  • Unsubscribe emails working
  • Admin dashboard accessible
  • Email logs visible in Vercel

Your blog is now ready to send professional email notifications to subscribers! 🎉