Vercel Preview Deployments Github Action

Trigger Vercel preview deployments when you want to integrate with external services smoothly.

Vercel preview deployments happen automatically with each commit. This action allows you to take control over automatic deployments, which is helpful when you want to create external resources (like a database) and wait for services to be ready before deploying your code on Vercel.

To take control over the automatic deployments, this action is injecting a custom script into the Ignored Build Step in your Vercel project settings. This script is canceling all preview deployments coming from the Vercel GitHub App and only allows deployments created by this GitHub action (based on Vercel REST API).

Combine this action with snaplet/action to get preview databases with production-accurate data for each of your Vercel preview deployment. Learn more here.

Usage

Create a GitHub Action Workflow file in your repository following one of these examples.

Standalone

# .github/workflows/preview.yml

name: Preview Environment

env:
  VERCEL_ACCESS_TOKEN: ${{ secrets.VERCEL_ACCESS_TOKEN }}
  VERCEL_PROJECT_ID: <YOUR_VERCEL_PROJECT_ID>

on:
  pull_request:
    types: [opened, synchronize, closed]
    branches:
      - main

jobs:
  deploy:
    if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
    runs-on: ubuntu-latest
    steps:
      - uses: snaplet/vercel-action@v3
  delete:
    if: ${{ github.event.action == 'closed' }}
    runs-on: ubuntu-latest
    steps:
      - uses: snaplet/vercel-action@v3
        with:
          delete: true

With Snaplet

Using snaplet/action

# .github/workflows/preview.yml

name: Preview Environment

env:
  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
  SNAPLET_PROJECT_ID: <YOUR_SNAPLET_PROJECT_ID>
  VERCEL_ACCESS_TOKEN: ${{ secrets.VERCEL_ACCESS_TOKEN }}
  VERCEL_PROJECT_ID: <YOUR_VERCEL_PROJECT_ID>

on:
  pull_request:
    types: [opened, synchronize, closed]
    branches:
      - main

jobs:
  deploy:
    if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
    runs-on: ubuntu-latest
    steps:
      - id: snaplet
        uses: snaplet/action@v1
      - uses: snaplet/vercel-action@v3
        with:
          env: |
            DATABASE_URL=${{ steps.snaplet.outputs.database-url }}
  delete:
    if: ${{ github.event.action == 'closed' }}
    runs-on: ubuntu-latest
    steps:
      - uses: snaplet/action@v1
        with:
          delete: true
      - uses: snaplet/vercel-action@v3
        with:
          delete: true

Documentation

Prerequisites

Connect your GitHub repository with Vercel

Environment variables

• VERCEL_ACCESS_TOKEN [required]
• VERCEL_PROJECT_ID [required]
• VERCEL_TEAM_ID

Inputs

await-for-deployment:
  description: Await for the preview deployment to be ready and output the preview deployment URL
  required: false
  type: boolean
  default: false
delete:
  description: Delete the preview related data on Vercel
  required: false
  type: boolean
  default: false
env:
  description: Environment variables to create on Vercel, they are scoped to the "preview" environment and the current branch
  required: false
  type: string
ignored-build-command:
  description: Command set for the Ignored Build Step in your project settings, the default script is canceling all preview deployments coming from the Vercel Github App and only allows preview deployments coming from this GitHub action.
  required: false
  type: string
  default: curl -sS "https://raw.githubusercontent.com/snaplet/vercel-action/v3/scripts/ignore-build.mjs" | node --input-type=module

Outputs

deployment-url:
  description: Preview deployment url