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
nextjs Article's
30 articles in total
Favicon
Open-Source TailwindCSS React Color Picker - Zero Dependencies! Perfect for Next.js Projects!
Favicon
Have you ever used `git submodules`?
Favicon
Open-Source React Icon Picker: Lightweight, Customizable, and Built with ShadCN, TailwindCSS. Perfect for Next.js Projects!
Favicon
Run NextJS App in shared-hosting cPanel domain!
Favicon
10 Must-Have VS Code Extensions for 2025 🔥
Favicon
has anyone find a fix for this issue on build of next and payload CMS version 2 (sharp issue) ./node_modules/sharp/build/Release/sharp-win32-x64.node Module parse failed: Unexpected character ' ' (1:2) You may need an appropriate loader to handle this
Favicon
Github Actions with Vercel in 2024
Favicon
Building Production-Grade Web Applications with Supabase – Part 1
Favicon
Simplifying API Routes in Next.js with next-api-gen
Favicon
How to Create and Consume a REST API in Next.js
Favicon
100 Days of Code
Favicon
Nextjs + Openlayers integration
Favicon
Deploying a Next.js UI App on S3 Using Jenkins🤩
Favicon
#Vinnifinni
Favicon
How to Combine English Folders with Polish Paths in Next.js (Rewrites, Redirects, and Middleware)
Favicon
Nextjs 15
Favicon
The "images.domains" Configuration is Deprecated 🐞
Favicon
Shared form with config files in NextJs
Favicon
Page can't be indexed in Google Search Console
Favicon
Why I Chose Node.js Over Next.js for My Website's Back-End
Favicon
How to add Email and Password authentication to Nextjs with Supabase Auth
Favicon
Analytics Tool For React Devs (Vercel Analytics Alternative)
Favicon
Harnessing the Power of Self-Hosted Supabase on Coolify: A Complete Guide to Server Setup and OAuth Providers Integration
Favicon
Smart and Modular Validation Toolkit
Favicon
How to customize Next.js metadata
Favicon
How to Use TensorFlow.js for Interactive Intelligent Web Experiences
Favicon
How to add Github oAuth in Nextjs with Supabase Auth | Login with Github
Favicon
NextJs: How to create a dedicated layout file for index page
Favicon
checa como se hace una conexión entre nextjs y la autenticación de supabase
Favicon
📣 Calling All Programmers!

Featured ones: