GitHub Actions: Setting up CI for a Node project

rukundokevin

Rukundo Kevin

Posted on March 7, 2023

GitHub Actions: Setting up CI for a Node project

CI/CD (Continuous Integration/Continuous Delivery/Development) is now an essential part of all kind of software projects. Today I am going to work you through setting up CI/CD with GitHub Actions.

Setting up CI
To use a GitHub action for building your repository at each push (on all branches), all you have to do is to place a YAML file under .github/workflows and commit it with your repo.

mkdir .github
cd .github
mkdir workflows
cd workflows
Enter fullscreen mode Exit fullscreen mode

Inside the created .yml file, Add the following.

# This workflow will do a clean install of node dependencies, build the source code and run tests
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: CI Pipeline

# trigger build when pushing, or when creating a pull request
on: [push, pull_request]

jobs:
  build:

    # run build on latest ubuntu
    runs-on: ubuntu-latest

    steps:
    # this will check out the current branch (https://github.com/actions/checkout#Push-a-commit-using-the-built-in-token)
    - uses: actions/checkout@v3
    # installing Node
    - name: Use Node.js 16.16.0
      uses: actions/setup-node@v3
      with:
        # this will use the latest Node 16 version
        node-version: 16.16.0
    # install dependencies using clean install to avoid package lock updates
    - run: npm ci
    # build the project if necessary
    - run: npm run build --if-present
    # finally run the test
    - run: npm test
Enter fullscreen mode Exit fullscreen mode

What this workflow basically does is,

  • checkout the branch
  • install node (on ubuntu)
  • install the dependencies of your project and build it if necessary
  • finally, run the tests

Comments are added on every line explaining the setup.

After! Commit & push your work and head over to the Actions section of your repo where you can see all executed workflows…

GitHub Action execution
And Click on the workflow to view detailed results

Image description

And Voila, you have a working GitHub Action workflow now.

💖 💪 🙅 🚩
rukundokevin
Rukundo Kevin

Posted on March 7, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related