Github Actions with Vercel in 2024

When you already have the app working on Vercel but you want to integrate Github Actions on top of it. Here's the right place to check.

Vercel

You need the following data from Vercel dashboard.

• ORG_ID Go to the top page > Settings > Team ID. Note that it's not under individual project page.

The URL you visit is like thishttps://vercel.com/{your_account_name}s-projects/~/settings

• PROJECT_ID
  Go to project page > Settings > Team ID > Project ID

• VERCEL_TOKEN
  Go to project page > Settings > Environment Variables
  Enter VERCEL_TOKEN as a key and the arbitrary value.

Github

Go to the Github project page > Settings > Secrets and variables > Actions > Repository secrets > New repository secret

and set the ones you copied from the Vercel above and others that are needed respectively such as dotenv values depending on your implementation.

Code

Create .github/workflows/workflow.yml

name: Github Auto Deploy

on:
  push:
    branches:
      - main

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

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

      - name: Setup Bun Runtime
        uses: oven-sh/setup-bun@v1
        with:
          bun-version: latest

      - name: Install Dependencies
        run: bun install

      - name: Run Unit Tests
        run: bun unit:test

      - name: Install Playwright Browsers
        run: bunx playwright install --with-deps

      - name: Run E2E Tests
        run: bunx playwright test
        env:
          CI: true
          NODE_ENV: test
          CTF_MGMT_API_ACCESS_TOKEN: ${{ secrets.CTF_MGMT_API_ACCESS_TOKEN }}
          CTF_SPACE_ID: ${{ secrets.CTF_SPACE_ID }}
          CTF_CDA_ACCESS_TOKEN: ${{ secrets.CTF_CDA_ACCESS_TOKEN }}

      - name: Install Vercel CLI
        run: bun install -g 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 }}