DEV Community

Toshiya Matsumoto
Toshiya Matsumoto

Posted on

1

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 }}

Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay