Skip to content
Developer Portfolio

Deploy to Vercel

While the template uses Netlify by default, you can easily deploy to Vercel by following this guide.

Prerequisites

  • A Vercel account
  • Your project in a Git repository
  • Node.js 18 or higher

Configuration Changes

1. Switch to Vercel Adapter

First, install the Vercel adapter:

Terminal window
npm install @astrojs/vercel@7

2. Update Configuration

Modify your astro.config.mjs:

import { defineConfig } from "astro/config";
import vercel from "@astrojs/vercel/serverless"; // Add this line
// ... other imports remain the same


export default defineConfig({
  // ... other config remains the same
  adapter: vercel(), // Change this line
});

3. Commit Changes

Terminal window
git add .
git commit -m "Switch to Vercel adapter"
git push

Deployment Steps

1. Import Your Project

  1. Go to Vercel Dashboard
  2. Click “Import Project”
  3. Select your Git repository
  4. Vercel will auto-detect Astro configuration

2. Configure Project

In the Vercel dashboard:

  1. Keep the auto-detected build settings
  2. Add environment variables:
    Terminal window
    SANITY_TOKEN=your_sanity_api_token
    SANITY_PROJECT_ID=your_sanity_project_id
    SANITY_DATASET= production
    SANITY_STUDIO_PREVIEW_URL= #name of your website
    PUBLIC_SANITY_VISUAL_EDITING_ENABLED=true
    NOTIFICATION_EMAIL= #your email
    RESEND_API_KEY=your_resend_api_key
    ENABLE_RATE_LIMIT=true
  3. Click “Deploy”

4. Access Your Sanity Studio

  1. Open a new tab and go to [your-site-name].vercel.app/admin
  2. A pop-up will appear asking you to add your link to CORS
  3. Click the provided link and add your site URL to the CORS settings in Sanity
  4. After that, you’ll be prompted to sign in with your Sanity credentials

Custom Domain Setup

  1. Go to Project Settings → Domains
  2. Click “Add Domain”
  3. Follow Vercel’s domain configuration steps

Deployment Features

Vercel provides:

  • Automatic HTTPS
  • Preview deployments
  • Edge functions support
  • Analytics
  • Performance monitoring

Troubleshooting

Common Issues

  1. Build Failures

    • Check Node.js version compatibility
    • Verify all dependencies are installed
    • Review build logs

  2. Runtime Errors

    • Confirm environment variables are set
    • Check Sanity connection
    • Verify SSR configuration

  3. Performance Issues

    • Enable Vercel’s edge caching
    • Optimize image loading
    • Review Vercel Analytics

  4. Invalid Runtime Error If you encounter the error: “The following Serverless Functions contain an invalid ‘runtime’: - _render (nodejs18.x)”, follow these steps:

    • Click on “Go to Project”
    • Navigate to Settings
    • Look for the Node.js Version setting
    • Set it to Node.js 18.x
    • Click on save
    • Go back to Deployments
    • Click on Redeploy

Need Help?