Deploy Astro + Convex to Vercel: 2026 Production Setup

Now that you’ve built a real-time Astro and Convex chat app (Part 1), it’s time to deploy it. In this guide I’ll show you how to deploy your Astro + Convex app to Vercel with proper production deploy keys, isolated preview deployments, and correct monitoring — all updated for Astro 7.2, Convex 1.4x, and Node 22.

This is Part 2 of the series. If you haven’t built the app yet, start with the Part 1 guide.

Why deploy an Astro + Convex app to Vercel?

The short version: Vercel serves the static shell, Convex Cloud handles everything real-time. They complement each other without overlap.

What Vercel provides

What Convex Cloud handles

The key insight: the browser connects to Convex directly over WebSocket for real-time data. Vercel just serves the HTML/CSS/JS bundle. That’s why this pairing works — each platform does what it’s good at.

What’s changed in this 2026 edition

If you’re returning from the 2025 version, here’s what’s different:

• Astro 7.2 — Vite 8 + Rolldown, Rust-based .astro compiler, 15–61% faster builds. Requires Node.js >= 22.12.0. See Astro 7’s faster builds benchmarks.
• Convex 1.4x — CLI deployment management (npx convex deployment create/select), typed deploy keys (prod:, preview:, dev:), EU hosting (Ireland), and Convex is now open-source with a self-hosting option.
• @astrojs/vercel v11 — requires Astro 7+. The old /serverless and /static subpath exports were removed in v10 — use the default import only.
• Vercel Marketplace — you can now create and pay for Convex through Vercel directly.
• Preview deployments — the original article’s setup silently pointed preview builds at production data. This edition fixes that with separate deploy keys.

Prerequisites

Before starting, make sure you have:

If you’re starting fresh, the fastest path:

npx create-convex@latest -t astro
cd my-app
npm run dev

This scaffolds the Astro + React + Tailwind v4 + Convex pattern with the withConvexProvider setup from Part 1.

Step 1 — Prepare your Convex production deployment

Create a production deployment

The quickest way — run npx convex deploy from your project directory:

cd your-project-directory
npx convex deploy

This creates a production deployment if one doesn’t exist, pushes your functions and schema, and generates a production URL.

For more control, use the newer deployment management commands (Convex CLI v1.34.0+):

npx convex deployment create          # interactive: pick type, region, reference
npx convex deployment select          # switch which deployment the CLI targets
npx convex deployment usage           # see usage vs limits (v1.43.0+)

Generate a Convex deploy key

1. Go to the Convex Dashboard
2. Select your project and navigate to your production deployment
3. Go to Deployment Settings → Deploy keys
4. Click Generate a deploy key (or “Generate Production Deploy Key”)
5. Select the deployment:deploy permission
6. Copy the key — you’ll need it for Vercel

The key will look like prod:your-deployment|abc123.... Convex uses typed deploy keys:

You can also generate keys via the CLI:

npx convex deployment token create my-ci-key --save-env

EU region note

Convex now offers EU West (Ireland, aws-eu-west-1) on all plans including free. If you’re in Europe, this means lower latency for your users.

Step 2 — Push to GitHub

Standard git flow, with one addition — commit the convex/_generated/ directory:

git remote add origin [email protected]:youruser/your-repo.git
git branch -M main
git add -A
git commit -m "initial commit with convex generated code"
git push -u origin main

Step 3 — Deploy to Vercel

This is where we deploy your Astro + Convex app to Vercel. The build command override is the key — it tells Convex to inject the deployment URL and push functions before Astro builds.

Add the Astro Vercel adapter

npx astro add vercel

This installs @astrojs/vercel v11 and adds it to your astro.config.mjs.

Important: @astrojs/vercel v10+ removed the /serverless and /static subpath exports. Use the default import:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  adapter: vercel(),
});

If you later need SSR or advanced options:

export default defineConfig({
  output: 'server',
  adapter: vercel({
    maxDuration: 30,
    // isr: true,
    // middlewareMode: 'edge',    // replaces old edgeMiddleware: true
    // skewProtection: true,
  }),
});

Configure build settings

1. Go to vercel.com/new and sign in with GitHub
2. Click Import next to your repository — Vercel auto-detects Astro
3. Configure the build settings:

What the build command does: npx convex deploy reads CONVEX_DEPLOY_KEY, injects CONVEX_URL into the build environment, pushes your functions and schema to the production deployment, then runs npm run build. Astro picks up CONVEX_URL at build time (via astro:env from Part 1) and bakes it into the client bundle.

Set the CONVEX_DEPLOY_KEY environment variable

Click Environment Variables in the Vercel project settings and add:

Deploy

1. Review your build command and environment variable
2. Click Deploy
3. Vercel builds the project — this takes a couple of minutes
4. Your site is live at https://your-project.vercel.app

Verify it works: open the URL, then open the same URL in a second browser tab. Send a message in one tab — it should appear instantly in the other. That confirms the Convex real-time connection is working against your production deployment.

Vercel Marketplace alternative (optional)

npx convex login --vercel
npm create convex@latest -- --with-vercel-json

Step 4 — Set up Vercel preview deployments

This is the biggest correctness upgrade from the 2025 article. The original setup used a single production deploy key — which meant every Vercel Preview Deployment’s frontend pointed at the production Convex backend. Preview apps would read and write production data.

Generate a separate Preview deploy key

1. In the Convex Dashboard, go to your project’s Settings page
2. Click Generate Preview Deploy Key
3. Copy the key — it will have a preview: prefix

In your Vercel project settings, add a second environment variable:

Yes, the same variable name with different values scoped to different environments. Vercel handles this — Production builds get the production key, Preview builds get the preview key.

Seed fresh preview backends

Optionally, seed data into fresh preview backends with the --preview-run flag:

npx convex deploy --cmd 'npm run build' --preview-run 'seedMessages'

This runs the seedMessages function after deploying to a new preview backend. Useful for demo data or smoke tests.

You can also control preview backend reuse with --preview-create and --preview-name.

Preview deployment lifetimes

Preview deployments are auto-deleted after a set period:

Preview deployments are still in beta as of September 2026. They work, but expect the occasional rough edge.

Step 5 — Add a custom domain

Configure in Vercel

1. Go to your project dashboard → Settings → Domains
2. Click Add Domain
3. Enter your domain (e.g., myapp.example.com)
4. Vercel provides DNS instructions — add the CNAME record to your DNS provider
5. SSL certificates are provisioned automatically with HTTP → HTTPS redirects

DNS propagation usually takes 5–10 minutes. Once the status shows “Valid” in Vercel, you’re done.

Step 6 — Monitor and analyze your production app

Vercel Web Analytics

The old “$20/month” pricing is gone. Vercel Web Analytics is now available on all plans with 50,000 events/month included, then $3 per 100,000 events. An optional Plus add-on is $10/month.

To set it up in Astro:

npm i @vercel/analytics

Add the component to your layout:

---
// src/layouts/Base.astro
import Analytics from '@vercel/analytics/astro';
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <Analytics />
  </head>
  <body><slot /></body>
</html>

Then enable it in the Vercel dashboard: Analytics → Enable.

Speed Insights and runtime logs

• Speed Insights basic is free on all plans. Plus is $10/project/month for advanced metrics.
• Runtime Logs are available on Pro+ plans for debugging serverless function execution.

Convex monitoring

In the Convex Dashboard:

• Logs tab — monitor function execution in real time
• Health & Insights — performance metrics and error tracking
• Usage Analytics — database operations and function call counts

From the CLI:

npx convex insights          # quick health check (v1.32.0+)
npx convex deployment usage  # usage vs limits

npx convex env set SENDGRID_API_KEY 'your-key'
npx convex env list
npx convex env default set MY_KEY 'value'  # project defaults for new deployments

Verify the deployment and troubleshooting

Verify your deployment

Common errors and fixes

npx convex deploy --cmd-url-env-var-name CUSTOM_CONVEX_URL --cmd 'npm run build'

npx convex dev      # regenerates and watches for changes
npx convex codegen  # one-shot regeneration

Costs and limits

Both platforms have genuine free tiers, but with caveats worth knowing upfront.

Convex pricing

Overage on Free/Starter: $2.20 per additional 1M function calls, $0.22/GB storage.

EU hosting adds a 1.3x multiplier on paid resource pricing, and included free-tier usage does not apply to EU deployments. If you’re cost-sensitive and in Europe, start with US East and migrate later if latency matters.

Vercel pricing

Self-hosting escape hatch

Convex is now open-source (get-convex/convex-backend, ~12.5k stars). You can self-host with Docker or a prebuilt binary, using SQLite or Postgres as the backend. This is the escape hatch if you outgrow the free tier or need full control.

For detailed setup, see self-hosting Convex with Docker Compose and Convex self-hosted vs. cloud free tier benchmarks.

If you want to self-host the frontend too, providers like Hetzner offer affordable European VPS. Check out hosting Astro on your own VPS and self-hosted alternatives to Vercel like Coolify for that path.

Conclusion

You’ve deployed your Astro + Convex app to Vercel with a production-ready setup. Here’s what you have:

• Production deployment with proper typed deploy keys scoped to the right environment
• Preview deployments isolated from production data — each PR gets its own Convex backend
• Custom domain with automatic SSL
• Monitoring via Vercel Web Analytics (free, 50K events/month) and Convex Dashboard logs
• Clear cost picture — both free tiers are real, with known upgrade paths

The development workflow stays simple: develop locally with npm run dev and npx convex dev, push to GitHub, and Vercel handles the rest. Preview deployments give you a staging environment per pull request without extra infrastructure.

If Vercel isn’t the right fit, you can also deploy your Astro site to Cloudflare or try deploying static Astro to Bunny.net. The Convex setup stays the same — only the frontend hosting changes.