Building a CI/CD Pipeline with Vercel and GitHub Actions: The Complete Guide

Continuous Integration and Continuous Deployment (CI/CD) are essential practices in modern software development. They ensure that your code changes are integrated, tested, and deployed quickly and efficiently.

In this guide, we’ll explore how to set up a CI/CD pipeline using Vercel and GitHub Actions, two powerful tools that can streamline your development workflow.

What is Vercel?

Vercel is a cloud platform that offers a complete suite of tools and services for frontend developers to build, deploy, and optimize web applications process. It’s designed to make the deployment process as seamless and efficient as possible, with a focus on performance, scalability, and simplicity.

It is particularly popular among developers using frontend frameworks like Next.js, React, Vue.js, and other modern web technologies.

Key Features of Vercel:

• Vercel simplifies the deployment process, allowing developers to deploy projects directly from their GitHub, GitLab, or Bitbucket repositories with just a few clicks.
• Vercel provides built-in support for serverless functions, enabling developers to add backend functionality to their applications without managing servers.
• Vercel generates deployment previews for every pull request, allowing teams to see the changes in a live environment before merging them into the main branch.
• Vercel’s global edge network ensures that applications are fast and responsive by serving content from the nearest edge location to the user.
• It supports popular front-end frameworks like Next.js, React, Vue.js, Angular, Svelte, and more.
• It provides automatic SSL certificates for secure connections without additional setup.

How Vercel Fits into the CI/CD Pipeline?

Vercel plays a crucial role in the CI/CD pipeline, particularly in the context of frontend and full-stack web development. Here’s how Vercel fits into the CI/CD pipeline and contributes to an efficient development workflow:

1. Continuous Integration (CI):

In this step, your application goes through automated testing and building. Tools like GitHub Actions handle tasks such as running tests to check for any issues and making sure the application is built correctly.

2. Continuous Deployment (CD):

After the application passes all tests, Vercel automatically updates your live website with the newest version of your application. This means your website always has the latest updates and improvements.

What is Github WorkFlow?

GitHub Workflow refers to a set of automated steps or actions that occur in response to events happening within a GitHub repository. These events can include code pushes, pull requests, issues being opened or closed, and more. The workflow is defined using YAML files stored in a special directory .github/workflows within the repository.

Better Code Quality: Automated testing checks code changes to ensure they meet quality standards before being added.

Quicker Releases: Continuous deployment speeds up how quickly new features and fixes are delivered.

Improved Teamwork: Automated workflows help developers collaborate more effectively by providing a consistent testing and integration environment.

Less Manual Work: Developers spend more time coding and less on repetitive tasks like manual testing and deploying.

Step-by-step Guide for Creating a CI/CD Pipeline with GitHub Actions and Vercel

Now, let’s begin integrating CI/CD for the Node.js sample project using 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.

3. Go to TOKEN.

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

5. Go to https://github.com/ & login. Create new repo and then moved to Actions.

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

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.

You can check your actions logs from Actions on GitHub.

Ref: Creating a CI/CD Pipeline with GitHub Actions and Vercel

Conclusion

Setting up a CI/CD pipeline with Vercel and GitHub Actions provides a powerful, flexible way to automate your development workflow. By following this guide, you can ensure that your code changes are tested and deployed quickly, providing a seamless experience for your users.

If you’re looking to hire a full stack developer familiar with CI/CD processes, they can help streamline your development and deployment cycles even further. Happy coding!