Skip to main content

Deploy to Vercel

Deploy your SvelteBolt application to Vercel in under 10 minutes with this step-by-step guide.

Prerequisites​

  • SvelteBolt project ready locally
  • GitHub/GitLab account with your code pushed
  • Vercel account (free tier available)
  • Supabase project configured with database schema and auth enabled
  • Stripe account with API keys (for payments)

Step 1: Prepare SvelteKit for Vercel​

SvelteBolt uses adapter-auto by default, which automatically detects the deployment platform and installs the appropriate adapter. For Vercel, this means @sveltejs/adapter-vercel will be installed automatically during the build process.

However, if you want to configure Vercel-specific options, you can explicitly install and configure the Vercel adapter:

import adapter from "@sveltejs/adapter-vercel";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      runtime: "nodejs18.x",
      regions: ["iad1", "sfo1"], // Optional: specify regions
    }),
  },
};

export default config;

Install Vercel adapter (optional):

bun add -D @sveltejs/adapter-vercel
# or
npm install -D @sveltejs/adapter-vercel

Note: The respective adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Vercel-specific options like runtime version and deployment regions.

Step 2: Connect Repository​

  1. Go to vercel.com and sign in
  2. Click "Add New..." → "Project"
  3. Import your repository:
    • Connect GitHub/GitLab if not already connected
    • Find your SvelteBolt repository
    • Click "Import"

Step 3: Configure Build Settings​

Vercel automatically detects SvelteKit projects, but verify these settings:

Framework Preset: SvelteKit Build Command: bun run build (or npm run build) Output Directory: .svelte-kit (auto-detected) Install Command: bun install (or npm install)

Step 4: Environment Variables​

Add your environment variables in Vercel dashboard:

  1. In the import screen, expand "Environment Variables"
  2. Add each variable:
# Supabase (Required - Main Database)
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
SUPABASE_SERVICE_ROLE_SECRET=eyJhbGciOiJIUzI1NiIsInR5cCI6...

# Stripe (Required for payments)
PUBLIC_STRIPE_KEY=pk_live_51ABC123...
STRIPE_SECRET_KEY=sk_live_51ABC123...
STRIPE_WEBHOOK_SECRET=whsec_ABC123...
  1. Set environment for each variable:
    • Production (live site)
    • Preview (pull requests)
    • Development (optional)

Step 5: Deploy​

  1. Click "Deploy"
  2. Wait 2-3 minutes for build to complete
  3. Your app will be live at https://your-app.vercel.app

Step 6: Update Stripe Webhooks​

Important: Update your Stripe webhook URL with the new domain:

  1. Go to Stripe Dashboard → Developers → Webhooks
  2. Select your webhook endpoint
  3. Update the URL to: https://your-app.vercel.app/api/stripe/webhook
  4. Save changes

Step 7: Configure Supabase for Production​

Important: Add your Vercel domain to Supabase settings:

  1. Go to Supabase Dashboard → Authentication → URL Configuration
  2. Add Site URL: https://your-app.vercel.app
  3. Add Redirect URLs:
    • https://your-app.vercel.app/auth/callback
    • https://your-app.vercel.app/auth/confirm
  4. Save configuration

For custom domains:

  • Update Site URL to your custom domain
  • Add custom domain to redirect URLs
  • Update any hardcoded URLs in your app

Custom Domain (Optional)​

  1. In Vercel dashboard, go to your project
  2. Settings → Domains
  3. Add your custom domain
  4. Update DNS records as instructed
  5. Update Stripe webhook URL to use custom domain

Automatic Deployments​

Vercel automatically deploys when you push to your main branch:

  • Push to main branch → Production deployment
  • Open pull request → Preview deployment
  • All deployments get unique URLs for testing

Troubleshooting​

Common SvelteKit + Vercel Issues​

❌ "Cannot find module" errors:

# Add to package.json if missing
"type": "module"

❌ Build fails with adapter error:

# Ensure correct adapter in svelte.config.js
import adapter from '@sveltejs/adapter-vercel';

❌ Environment variables not working:

  • Check variable names match exactly (case-sensitive)
  • Verify variables are set for "Production" environment
  • Redeploy after adding new variables

❌ API routes returning 404:

  • Ensure API routes are in src/routes/api/
  • Check file naming follows SvelteKit conventions
  • Verify +server.ts files export correct methods

❌ Supabase connection issues:

  • Verify PUBLIC_SUPABASE_URL is accessible and correct
  • Check CORS settings in Supabase dashboard (add your Vercel domain)
  • Ensure service role key has correct permissions
  • Verify database schema is properly migrated
  • Check if Row Level Security (RLS) policies are correctly configured

❌ Database/Auth errors:

  • Ensure Supabase project is not paused (free tier limitation)
  • Check if auth providers are enabled in Supabase dashboard
  • Verify email templates are configured for auth flows
  • Test database connection with a simple query first

❌ Stripe webhooks failing:

  • Verify webhook URL matches deployment URL
  • Check webhook secret is correct
  • Test with Stripe CLI: stripe listen --forward-to https://your-app.vercel.app/api/stripe/webhook

Performance Tips​

  • Enable Edge Runtime for API routes where possible
  • Use ISR (Incremental Static Regeneration) for landing pages
  • Optimize images with Vercel's image optimization
  • Monitor build times and bundle size

Environment Management​

Development:

# Use test keys
PUBLIC_STRIPE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

Production:

# Use live keys
PUBLIC_STRIPE_KEY=pk_live_...
STRIPE_SECRET_KEY=sk_live_...

Monitoring​

Check these after deployment:

✅ Site loads correctly at your Vercel URL
✅ Supabase database connection works (test with a simple query)
✅ Authentication works (login/signup with Supabase Auth)
✅ Database queries execute (check your app's main features)
✅ Stripe payments process successfully
✅ Webhooks receive events (check Stripe logs)
✅ API routes respond correctly

Supabase-specific checks:

  • Test user registration and email verification
  • Verify Row Level Security policies work as expected
  • Check real-time subscriptions if your app uses them
  • Ensure file uploads work if using Supabase Storage

Next Steps​