Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide

What is VERCEL?

Vercel is a cloud platform for static sites and Serverless Functions that enables developers to deploy and manage web applications with ease. It provides seamless integration with various frontend frameworks like Next.js, React, Vue.js, and others, offering a robust and scalable solution for modern web development.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide

How Vercel Fits into the CI/CD Pipeline?

In a CI/CD (Continuous Integration/Continuous Deployment) pipeline, Vercel plays a crucial role in the deployment phase:

1. Continuous Integration (CI): This phase typically involves automated testing and building of your application. Tools like GitHub Actions can be used to run tests and ensure that the application builds correctly.

2. Continuous Deployment (CD): Once the application passes all tests, Vercel takes over to automatically deploy the latest version of your application. This ensures that your production environment is always up-to-date with the latest code changes.

What is Github WorkFlow?

GitHub workflows, part of GitHub Actions, are automated processes that you can set up in your GitHub repositories to build, test, and deploy your code. These workflows are defined by YAML files in the `.github/workflows` directory of your repository. They allow you to automate a wide range of tasks, from running tests and linting code to deploying applications and sending notifications.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide

Improved Code Quality: Automated testing ensures that code changes meet quality standards before being merged.

Faster Delivery: Continuous deployment speeds up the release cycle, allowing teams to deliver features and fixes more rapidly.

Enhanced Collaboration: Automated workflows make it easier for multiple developers to work together, as they provide a consistent environment for testing and integration.

Reduced Manual Effort: Developers can focus more on coding and less on repetitive tasks like manual testing and deployment.

Let’s start CI/CD integration of the NodeJS sample project with Github Actions and Vercel.

Working repo: https://github.com/prashant1879/ci-cd-nodejs-pineline-github-with-vercel

1. Go to vercel.com and login.
2. Go to ACCOUNT SETTING.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide

3. Go to TOKEN.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide.

4. Create a token with TOKEN NAME, SCOPE & EXPIRATION.

5. Go to GITHUB.COM & login. Create new repo and then moved to Actions.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide.

6. Create a file with main.yml

name: Vercel development Deployment
env:
  #THIS IS PROJECT INFORMATION WHICH COMES FROM .VERCEL/PROJECT.JSON FILE.
  # THIS KEY VALUE STORE IN GITHUB ACTION. 
  # GITHUB.COM > SETTINGS > SECRETS AND VARIABLES > ACTIONS > REPOSITORY SECRETS.
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - main
jobs:
  Deploy-development:
    runs-on: ubuntu-latest
    steps:
      #INSTALL NODEJS & NPM ON VERCEL
      - uses: actions/checkout@v2
      - name: Install Node.js
        uses: actions/setup-node@v3

      - name: Install npm
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          registry-url: 'https://registry.npmjs.org/'
      #INSTALL DEPENDENCIES
      - name: Install dependencies
        run: npm install  
      #INSTALL VERCEL CLI IN SERVER.
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      #SET ENVIRONMENT IN VERCEL. 
      #CREATE ENVIRONMENT IN VERCEL & BUILD IN VERCEL.
      # GITHUB.COM > SETTINGS > SECRETS AND VARIABLES > ACTIONS > ENVRIONEMENT SECRETS.
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=development --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 }}

add code and save it.

8. Go to the Setting section in GitHub.com

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide.

9. Click on SECRETS AND VARIABLES > ACTIONS

10. Add Repository secrets like VERCEL_TOKEN which is created from token sections of vercel website.

It’s time to test out Github WorkFlow. Let’s push the code in the main branch.

Creating a CI/CD Pipeline with GitHub Actions and Vercel: A Step-by-Step Guide.

You can check your actions logs from Actions on GitHub.

Enjoyed the story? Give it a 👏 and share the magic! Your click could be the key to brightening someone’s day. And why not add your voice to the conversation? Comment below and join the journey!