Deploy Svelte on Vercel with GitHub Actions

Svelte • Vercel Platform • GitHub Actions

Configuration Files

name: Deploy to Vercel

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

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

export default {
  kit: {
    adapter: adapter()
  }
};

Prerequisites

  • Vercel account
  • GitHub repository
  • Node.js 18+
  • SvelteKit project
  • @sveltejs/adapter-vercel installed

Deployment Steps

  • Create SvelteKit app: npm create svelte@latest my-app
  • Install Vercel adapter: npm i -D @sveltejs/adapter-vercel
  • Update svelte.config.js with Vercel adapter
  • Install Vercel CLI: npm i -g vercel
  • Link project: vercel link
  • Get tokens from Vercel project settings
  • Add GitHub Secrets
  • Create .github/workflows/deploy.yml
  • Push to deploy

📝 Additional Notes

  • ⚡ SvelteKit optimized for Vercel
  • 🌍 Edge Functions support
  • 🔄 Automatic preview deployments
  • 💰 Free tier generous
  • 📦 Smallest bundle sizes
  • 🚀 Server-side rendering support
  • 🔒 HTTPS included
  • ⚠️ Use adapter-vercel for SSR features