Logo

dev-resources.site

for different kinds of informations.

Github Actions with Vercel in 2024

Published at
1/13/2025
Categories
githubactions
vercel
bunjs
nextjs
Author
toshiya_matsumoto_ac94abe
Categories
4 categories in total
githubactions
open
vercel
open
bunjs
open
nextjs
open
Author
25 person written this
toshiya_matsumoto_ac94abe
open
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
vercel Article's
30 articles in total
Favicon
Github Actions with Vercel in 2024
Favicon
Deploy laravel application using vercel : Amazing
Favicon
Building a Twitter OAuth Authentication Header Generator with Vercel Serverless Functions
Favicon
This Serverless Function has crashed. Your connection is working correctly. Vercel is working correctly.
Favicon
How to Host a Project on Vercel Using a GitHub Repository
Favicon
Page can't be indexed in Google Search Console
Favicon
PSA: Add the following to your Vercel project's firewall
Favicon
Deploying an Existing Express API + Prisma + Supabase Project to Vercel
Favicon
Next 14 Rate Limiting made easy
Favicon
Vercel asking for env variable I already provided...
Favicon
I like Vercel Deployments
Favicon
SNAP PHOTOGRAPHY WEBAPP
Favicon
Web development - Vercel AI
Favicon
Maintenance mode check in Next.js middleware.ts
Favicon
Journey to first release of "remozine.com"
Favicon
How I Built an Affordable, Efficient Architecture for a Daily Movie Puzzle Game
Favicon
Deploying Your Node.js Backend for Free on Vercel
Favicon
Deploy Laravel to Vercel
Favicon
Un blog statique sur mesure avec Notion headless
Favicon
Export .env from Vercel: New Laptop, Old Project? No Problem!
Favicon
Next.js & Hono.js Starter Project πŸš€
Favicon
How I Got Over My Fear of Launching by Building a Simple Tool in a Few Hours
Favicon
How to create free email forwarding for your Vercel app custom domain
Favicon
How to Host Hugo inΒ Vercel
Favicon
Automating Your Project Deployment with GitHub Actions: A Step-by-Step Guide
Favicon
Fast and Simple NestJS App Deployment on Vercel
Favicon
How to Optimize Vercel Costs
Favicon
5 Vercel Features Developers Absolutely Love
Favicon
Deploying a Node.js + Express Server to Vercel Using the CLI
Favicon
How to deploy a simple website to Vercel: case of a portfolio

Featured ones: