Logo

Vercel Deployment

The template is pre-configured for Vercel. The @astrojs/vercel adapter is already installed and astro.config.mjs is set to output: 'server'. Push to GitHub, import the repo on Vercel, and your site deploys in under a minute with free SSL, preview URLs on every branch, and edge-cached assets.

Last updated: 2026-03-29

Astro Config. Already Set Up

Flux uses Astro's server output mode so API routes, Clerk auth middleware, and Stripe webhooks all work at runtime. The vercel adapter is already wired in. You don't need to change anything here.

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

export default defineConfig({
  output: 'server',       // SSR — required for API routes & Clerk middleware
  adapter: vercel(),      // Deploys to Vercel Edge / Serverless functions
  integrations: [react()],
  vite: {
    plugins: [tailwindcss()],
  },
});

Import & Deploy on Vercel

Go to vercel.com → Add New Project → Import your GitHub repo. Vercel auto-detects Astro and sets the build command and output directory correctly. Hit Deploy.

Terminal
# Vercel reads these from astro.config.mjs automatically
# Build command : npm run build
# Output dir    : dist/
# Node version  : 20.x (recommended)
#
# Framework preset: Astro  ← Vercel sets this for you
#
# After first deploy, every push to main auto-deploys to production.
# Every push to any other branch creates a preview URL.

Environment Variables

Copy every key from your local .env into Vercel Dashboard → Project → Settings → Environment Variables. Flux uses all of these across its integrations. Missing a key will cause runtime errors.

.env
# Vercel Dashboard → Settings → Environment Variables
# Set all three environments: Production, Preview, Development

# Clerk
PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
CLERK_SECRET_KEY=sk_live_...

# Stripe
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# PostHog
PUBLIC_POSTHOG_KEY=phc_...
PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

# Sanity CMS
SANITY_PROJECT_ID=your_project_id
SANITY_DATASET=production
SANITY_API_TOKEN=sk...

# Resend Email
RESEND_API_KEY=re_...

# Supabase
PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...

Deploy & Redeploy from CLI

Use the Vercel CLI to deploy without pushing to git. Useful for testing a hotfix or sharing a preview before merging.

Terminal
# Install Vercel CLI globally
npm install -g vercel

# Link your local project to Vercel (first time only)
vercel link

# Deploy to preview URL
vercel

# Deploy to production
vercel --prod

# Pull environment variables to local .env.local
vercel env pull .env.local
PostHog AnalyticsGit