How I built my first bot using Typescript - Part #4: Deployment and CI/CD

Hi everyone,

This the part #4 of the series, make sure to check the rest of them! Here's the previous episode.

Recently I've published a GitHub app on GitHub marketplace. Darkest-PR is a bot for responding to the actions occurring in your repository by commenting them with quotes from the Darkest Dungeon game. The goal was to make development more fun and enjoyable thanks to the narrations by the Darkest-PR.

In this episode, we'll discover the developments and decisions made for this app regarding the deployment and CI/CD aspects.

Episodes:

1. Beginning and architecture
2. Unit and feature testing, mocking & spying
3. Code coverage reports
4. Deployment and CI/CD (you're here!)
5. Publishing and final remarks

Don't forget to check the repository if you'd like to follow along!

What is CI/CD?

CI/CD stands for Continuous Integration and Continuous Deployment. It’s a methodology used to streamline the development process by automating the build, testing, and deployment stages of a project.

Continuous Integration (CI): This is the practice of automatically integrating code changes into a shared repository several times a day. Each integration is verified by an automated build and tests, allowing me to catch issues early. Tools like GitHub Actions, Jenkins, and Travis CI are commonly used for CI.

Continuous Deployment (CD): After the code passes all tests and meets quality checks, it’s automatically deployed to a production environment. This reduces manual intervention, making the deployment process faster and more reliable. Vercel, Netlify, and AWS Amplify are examples of CD tools.

In the context of Darkest-PR:

CI tasks include:

• Checking out the project (cloning) uses: actions/checkout@v4
• Setting up Node.js environment uses: actions/setup-node@v3
• Installing dependencies npm ci
• Building the app npm run build
• Running unit tests and generating coverage reports npm test -- --coverage
• Uploading code coverage reports to CodeCov uses: codecov/codecov-action@v4.0.1

CD tasks include:

• Deploying the app to Vercel as serverless deployment

Setting Up CI with GitHub Actions

GitHub Actions is the CI/CD tool I used for Darkest-PR. It allows me to automate tasks like testing and building the app whenever I push code to the repository.

Here's the GitHub action workflow yaml file:

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node

name: Node.js CI

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

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v4
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build
    - run: npm test -- --coverage
    - name: Upload coverage reports to Codecov
      uses: codecov/codecov-action@v4.0.1
      with:
       token: ${{ secrets.CODECOV_TOKEN }}

Let’s break down what this file does:

• Trigger Events: The workflow triggers on any push or pull request to the master branch.
• Job Setup: It runs on an ubuntu-latest environment and tests the project using Node.js version 18.x. Steps:
• Checkout Code: It pulls the latest code from the repository.
• Setup Node.js: It installs the specified Node.js version and caches npm dependencies.
• Install Dependencies: It installs the project dependencies using npm ci.
• Build the Project: It builds the source code.
• Run Tests: It runs tests and generates a coverage report.
• Upload Coverage: It uploads the coverage report to Codecov for analysis.

This setup ensures that the project is always tested and built in a clean environment, catching any issues before they reach production.

Deploying to Vercel

For deployment, I use Vercel’s free tier, which offers free serverless deployment. The app is deployed by creating serverless function definitions that Vercel uses to run the app.

Here’s the code from my deployment setup, Vercel API Endpoint: Located in /api/github/webhooks/index.ts:

import {createNodeMiddleware, createProbot} from "probot";
import app from "../../../src/index.js";

const probot = createProbot();

export default createNodeMiddleware(app, {
    probot,
    webhooksPath: "/api/github/webhooks",
});

This file defines the API endpoint that Vercel will deploy. It uses Probot to handle GitHub webhooks, allowing the app to listen to events from the repositories it’s installed on.

Whenever I push code to the master branch, the CI workflow is triggered, running all tests and generating coverage reports. If everything passes, the app is then deployed to Vercel automatically, ensuring that the latest version is always live.

Conclusion

By integrating CI/CD into Darkest-PR, I’ve automated the build, testing, and deployment process, making the development workflow smoother and more efficient. GitHub Actions handles the CI tasks, while Vercel takes care of the CD side, providing a seamless deployment experience.

And it is a wrap! In the next chapter we will talk about the publishing of the app. GitHub Marketplace, ProductHunt and many more will be explored upon, so stay tuned.