Github actions: Deploy on vercel using CI/CD

In this article, we're going to cover what CI and CD are, and explain how easy it is to deploy an Angular or other framework app on Vercel using GitHub Actions.

Continuous Integration (CI)

Continuous Integration (CI) is a development practice where developers frequently merge their code changes into a shared repository, often several times a day. Each change is automatically tested and verified through an automated build process. The primary goal of CI is to detect issues early in the development cycle, ensuring that new code integrates smoothly with the existing codebase.

Continuous Deployment (CD)

Continuous Delivery (CD) is a software development practice where code changes are automatically prepared for release to production. It builds on the principles of Continuous Integration (CI) by automating the steps required to deploy an application, so the software can be delivered quickly and reliably at any time.

Github Actions

GitHub Actions is a tool integrated with GitHub that allows you to build, test and deploy your code with ease. By setting up workflows, you can define a series of actions that run automatically in response to events in your repository, such as code pushes or pull requests.

Code

1. Create your Angular app

If you have Angular CLI installed globally:

ng new <name of your app>

If you don't:

npx @angular/cli new <name of your app>

This will create a simple Angular app and that's all we needed.

2. Configuring Github Actions

In the root of your project create a directory called .github and inside that, another folder called workflows

For each pipeline or a workflow you want to create, you’ll need a separate YAML file inside of the workflows folder.

In our case, we’ll make two: a production and a preview deployment pipeline, so let’s name the files accordingly: production.yaml and preview.yaml.

production.yaml

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches:
      - master
jobs:

  Deploy-Production:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Install Vercel CLI
        run: npm install --global 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 }}

preview.yaml

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches-ignore:
      - master

jobs:
  Deploy-Preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

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

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

You can commit this to your github, but the pipeline is going to FAILED, because we don't set the environment variables.

3. Creating environment variables

• Login to Vercel and at this screen, create a token and copy the token.

• At your Github repository go to Settings > Secrets and Variables > Actions > Secrets > Click to create New Repository Secret > Set the name to VERCEL_TOKEN > Paste the token value you get at Vercel.

4. Get VERCEL_ORG_ID and VERCEL_PROJECT_ID

• Install the Vercel cli at your project

• locally
  

npm install vercel

or

npm install -g vercel

• Login with your Vercel credentials at the CLI

npx vercel login

or

vercel login

• Choose how you want to login with Github, email etc.

• Link your project with Vercel

• After you successfully logged in, run:
  

npx vercel link

or

vercel link

• Answer the questions:
  • Set up ? Y
  • Which scope should contain your projects ? Choose your scope
  • Link to existing project ? N
  • What's your project's name ? Choose a name for your project
  • In which directory is your code located ? Choose the directory of your code
  • Want to modify these settings ? N
• After this, a .vercel directory will be created at your project with a file called project.json.
• In this file, you will find the projectId and orgId, the values will be VERCEL_PROJECT_ID and VERCEL_ORG_ID, respectively.

5. Set VERCEL_PROJECT_ID and VERCEL_ORG_ID

• At your Github repository go to Settings > Secrets and Variables > Actions > Secrets > Click to create New Repository Secret > Set the name to VERCEL_PROJECT_ID > Paste the token value you get at project.json . > Set the name to VERCEL_ORG_ID > Paste the token value you get at project.json .

• After that the pipeline will work successfully and the app will be deployed

6. Add test automation

On your package.json add the script test:ci:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test:ci": "ng test --no-watch --no-progress --code-coverage --browsers=ChromeHeadless"
  },

• Change the preview.yamlfile to:

name: Vercel Preview Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

on:
  push:
    branches-ignore:
      - master

jobs:
  Test:
    runs-on: ubuntu-latest
    steps:

      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci

      - run: npm run test:ci
  Deploy-Preview:
    needs: [Test]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

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

      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}

      - name: Build Project Artifacts
        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}

      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

• This will run the automated tests of your application and only if all the tests passed the preview will be deployed.

Conclusion

After reading this article, you learned how to set up a pipeline with tests and deploy on Vercel. This is a start to understand the basics of CI and CD and pipelines using Github Actions.

Thank you for reading !

📍 Reference

• How to deploy on Vercel with github actions
• Angular tests

👋 Talk to me

• LinkedIn
• Github
• Portfolio