Continuous Integration with Github Actions workflow

Tue, May 9, 2023

Each project is different and so are its priorities, but what they have in common is that they all need to be deployed and tested. This part can always be done manually, but it ends up being repetitive and tedious. That's why it's convenient to automate it, and that's why continuous integration and continuous deployment tools exist.

In this case we are going to use Github Actions to automate the deployment of this project in Vercel, but also to do a series of previous tasks such as testing, code formatting and documentation generation.

Design

The most time-consuming thing is to plan what your pipeline is going to look like, i.e. what tasks you are going to execute and in what order. In my case I started to draw in escalidraw how my task flow could look like and after several attempts one was the one that convinced me the most. Once you have this part more or less thought what you have to do is to go to your project and create a folder in the following route .github/workflows once inside you can create the file with the name you want with the format .yml in my case I have two pre-deploy.yml and post-deploy.yml, here I am not going to go into detail of how the format .yml works, but I am going to explain what does each of the jobs that I have in each of the workflows.

First I run the cancel redundancy, code checking, testing and documentation jobs in parallel and if everything goes well, versioning and deployment in pre-production. After checking that everything went well and was deployed correctly in pre-production, I do my manual tests on the featuring developed or on the bugfixing and after checking that everything is correct and there is no problem, I can make the decision to deploy or not in production. For this it would only be necessary to create a pull request to merge the develop branch in master and merge it but, in my workflow the jobs don't end here. After all this and once merged in production a last performance test is executed using lighthouse and generating a page by page report that I publish once the job is finished.

Here you can see it in a more graphical way:

This is a snippet of what my pre-deploy workflow looks like:

pre-deploy.yml

name: Workflow Pre-Deploy
on:
    push:
        branches: [dev]
jobs:
    cancel_redundancy:
        name: Cancel Redundant Workflow Runs
        runs-on: ubuntu-latest
        steps:
            - name: Cancel previous redundant workflow runs
              uses: styfle/cancel-workflow-action@0.11.0
              with:
                  access_token: ${{ secrets.TOKEN_GITHUB }}
    code_checking:
        name: Linting
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 18
                  cache: yarn
            - name: Install dependencies
              run: |
                  echo "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
                  echo "@xabierlameiro:registry=https://npm.pkg.github.com/" >> ~/.npmrc
                  yarn install --frozen-lockfile
            - name: Linter
              run: yarn run lint

Workflow complete in my github

Results

Each of these reports has its own repository on github and that's where the results of each of the tests are published.

Here I can see the results of my jobs every time I make changes to my project:

Conclusions

Every time I develop a new component in React, or create a new page with Nextjs I'm assured that a battery of tests thoroughly checks that what I've added to my project hasn't broken any of the previous work. This is partly because you are the one who has to create the tests in the most delicate and critical parts of your application.

You can find all this code in my github repository and if you liked this content you can help me with a ⭐️ Thanks !