CI/CD feels like magic! ? - Creating a Git Action for Vercel.

I've always wanted to build a CI/CD pipeline to understand the inner workings of automated deployments.

But there was one catch! I didn't own any servers or have cloud subscriptions.

No worries! I've gotta Hack!

VERCEL...

Vercel offers automatic deployments that build and run code whenever you push new changes to Git.

BUT!! Noobs use that!

Vercel also offers a CLI tool to deploy code. So, I created a custom GitHub Action that builds my code and deploys it to Vercel, overriding the default automatic functionality. ??

What are Git Actions?

GitHub Actions is a CI/CD (Continuous Integration and Continuous Deployment) platform that allows you to automate workflows directly in your GitHub repository. It helps you build, test, and deploy your code by defining workflows in YAML files.

Setting Up GitHub Actions

Here's a step-by-step guide to setting up a basic GitHub Actions workflow to deploy your code to vercel.

Step 1: Set Up GitHub Secrets:

Before using the workflow, set up your GitHub repository secrets for secure storage of sensitive information, that is similar to using .env in node projects.

1. Go to your GitHub repository.
2. Click on Settings.
3. Navigate to Secrets and variables > Actions.
4. Click New repository secret.
5. Add the following secrets:

VERCEL_ORG_ID: Your Vercel organization/team ID.

Go to your Vercel Dashboard > [Your Team] > Settings > General > Team ID

VERCEL_PROJECT_ID: Your Vercel project ID.

Go to your Vercel Dashboard > [Your Team] > [Your Project] > Settings > General > Team ID

VERCEL_TOKEN: Your Vercel authentication token.

Create a new Auth Token by visiting https://vercel.com/account/settings/tokens

Step 2: Create the Workflow File

1. In your GitHub repository, create a new directory named .github/workflows.
2. Inside this directory, create a file named main.yml (or any name you prefer).

Step 3: Define the Workflow Configuration

name: Build and Deploy to vercel

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

on:
  push:
    branches: ['master']
  pull_request:
    branches: ['master']

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: "18.x"

    steps:
      - name: Checkout code
         uses: actions/checkout@v4

      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install Vercel CLI
        run: npm install --global vercel@latest

      - name: Install Node Modules
        run: npm install
 
     - name: Build the project
        run: npm run build

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --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 }}        

Step 4: Commit and Push Your Workflow

1. Save the yml file.
2. Commit your changes:

git add .github/workflows/main,yml

git commit -m "Add CI/CD workflow for Vercel deployment"

git push origin master        

Step 5: Trigger the Workflow

Whenever you push changes to the master branch or open a pull request targeting the master branch, this workflow will automatically trigger, building and deploying your project to Vercel.

Breakdown of Key Workflow Steps

• Checkout Code: Uses actions/checkout@v4 to pull your repository's code.
• Node.js Setup: Configures the specified Node.js version (20) and caches npm dependencies.
• Vercel CLI Installation: Installs the Vercel CLI globally to manage deployments.
• Build and Deploy: Builds the project and deploys it to Vercel using the CLI.

This setup leverages Vercel’s CLI in combination with GitHub Actions to give you more control over your deployment process, allowing you to customize your CI/CD pipeline while benefiting from Vercel’s infrastructure.