---
title: "Deploy Your Astro + Convex App to Vercel: The Simplest Production Setup"
description: "Deploy your real-time Astro and Convex application to Vercel in minutes with zero configuration - the easiest way to go from development to production"
date: 2025-07-31
categories: ["cms"]
tags: ["astro","convex"]
---

Now that you've built a real-time chat app with [Astro and Convex](/astro-convex-realtime-app/), 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](/astro-convex-realtime-app/))
- A [Vercel account](https://vercel.com)
- A [GitHub](https://github.com) repository with your code



## Step 1: Prepare Convex Production

### Create Production Deployment

Create a production deployment in Convex:

```sh
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](https://dashboard.convex.dev)
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

```sh
# 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:

```sh
npx astro add vercel
```

## Step 2: Push to GitHub

Add your repository to GitHub and push your code:

```sh
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](https://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](https://dashboard.convex.dev):

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.