Deploy Your Astro + Convex App to Vercel: The Simplest Production Setup

Now that you’ve built a real-time chat app with Astro and Convex, it’s time to deploy it. In this guide, I’ll show you how to deploy your Astro + Convex application to Vercel without complex configuration.

Why Vercel + Convex Works Well

Production Deployment Options

Vercel provides:

• Git-based deployments
• Automatic CI/CD
• A free tier for projects
• Edge network
• Analytics and performance monitoring
• Astro support

Convex Cloud handles:

• Real-time database sync
• Automatic scaling
• Security features
• Environment-based deployments
• Performance monitoring

The Vercel integration with Convex handles configuration automatically.

What We’ll Deploy

We’ll take your existing Astro + Convex chat application and:

• Deploy to Vercel without code changes
• Set up production deployments
• Configure environment variables
• Set up preview deployments for pull requests
• Add custom domain (optional)
• Implement production monitoring

No adapters or complex config files needed.

Prerequisites

Before starting, you need:

• An existing Astro + Convex project (follow our previous guide)
• A Vercel account
• A GitHub repository with your code

Step 1: Prepare Convex Production

Create Production Deployment

Create a production deployment in Convex:

cd your-project-directory
npx convex deploy

This command creates a new production deployment, deploys your functions and schema, and generates a production deployment URL.

Get Your Production Deploy Key

1. Visit the Convex Dashboard
2. Select your project
3. Go to Settings → Deploy Keys
4. Click Generate Production Deploy Key
5. Copy the key - you’ll need it for Vercel

# The key will look like this:
CONVEX_DEPLOY_KEY=your-production-deploy-key-here

Add Vercel Adapter to Astro

Add the Vercel adapter to make your project work on Vercel:

npx astro add vercel

Step 2: Push to GitHub

Add your repository to GitHub and push your code:

git remote add origin git@github.com:bitdoze/test-repo.git
git branch -M main
git add -A
git commit -m "changes to code"
git push -u origin main

Step 3: Deploy to Vercel

Connect Your Repository

1. Go to Vercel Dashboard

   • Visit vercel.com/new
   • Sign in with GitHub

2. Import Your Project

   • Click Import next to your repository
   • Vercel detects it’s an Astro project

Configure Build Settings

Framework Preset: Astro

Build Command:

npx convex deploy --cmd 'npm run build'

Output Directory: dist

Install Command: npm install

Set Environment Variables

Click Environment Variables and add:

Variable Name	Value	Environment
CONVEX_DEPLOY_KEY	your-production-deploy-key	Production

Deploy Your Site

1. Review Settings

   • Check your build command
   • Verify the environment variable

2. Click Deploy

   • Vercel starts building
   • Watch the build process
   • Build completes in 1-2 minutes

3. Done

   • Your site is live at https://your-project.vercel.app
   • Convex functions are deployed automatically

Step 4: Custom Domain Setup (Optional)

Add Custom Domain in Vercel

1. Access Domain Settings

   • Go to your project dashboard
   • Navigate to Settings → Domains
   • Click Add Domain

2. Configure Domain

   • Enter your domain (e.g., myapp.example.com)
   • Vercel provides DNS instructions
   • Add the CNAME record to your DNS provider

3. SSL Setup

   • Vercel provisions SSL certificates
   • HTTPS is enabled
   • Automatic HTTP to HTTPS redirects

Domain Verification

• When DNS propagates, the status shows “Valid” (usually 5-10 minutes)
• Test your domain to confirm it works
• SSL certificates are issued and renewed automatically

Step 5: Monitoring & Analytics

Vercel Analytics

Real User Monitoring (Free):

1. Go to your project dashboard
2. Click the Analytics tab
3. View performance data
4. Monitor Core Web Vitals

Speed Insights (Free):

• Lighthouse scores
• Performance recommendations
• Real user data

Vercel Pro Analytics

Web Analytics ($20/month):

• Visitor analytics
• Page view tracking
• Referrer analysis
• Geographic data

Audience (Pro feature):

• User behavior data
• Conversion tracking
• A/B testing

Monitor Convex Performance

In your Convex Dashboard:

1. Function Logs: Monitor function execution
2. Performance Metrics: Track function response times
3. Error Tracking: Get notified of function errors
4. Usage Analytics: Monitor database operations

Conclusion

You’ve deployed your Astro + Convex application to Vercel. This setup gives you:

What You’ve Accomplished

• Simple deployment without adapters or complex configuration
• Automatic deployments on every push
• Fast loading times through the edge network
• Built-in monitoring and performance insights
• Security features included by default

Why This Stack Works

• Deploy quickly without hours of configuration
• Free tiers available for both platforms
• Real-time capabilities for interactive applications
• Automatic scaling for traffic spikes
• No manual security configuration needed
• Fast performance worldwide

Development Workflow

1. Develop locally with npm run dev and npx convex dev
2. Push to GitHub when ready
3. Automatic deployment to Vercel
4. Preview URLs for pull requests
5. Production deployment when merged to main
6. Built-in monitoring

The Astro + Convex + Vercel stack works well for building real-time applications like chat apps, collaborative tools, and interactive dashboards.