Using GitHub Actions for Continuous Integration in a BPMN Visualization open source project

Create a build workflow with GitHub Actions

by Marcin Michniewicz, Bonitasoft R&D Engineer

Introduction

The BPMN Visualization, open source project, has been launched to develop a TypeScript Library for process visualization. In this article, I’ll explain how we are using GitHub actions to create a build workflow which we’ll use for this BPMN Visualization project.

Useful GitHub terms and glossary

Although I recommend you check the GitHub Actions documentation, I have described below the basic elements needed to understand the main principles of GitHub Actions.

  • A job consists of one or more actions.
  • A workflow consists of one or more jobs.
  • A trigger is an event that triggers a specified workflow (for example, a push to the master branch).

Expectations from the Build workflow

It automatizes repetitive tasks by:

  • building the project, and
  • testing the project
  • validate that incoming code changes are of good quality, using:
  • lint
  • unit tests
  • e2e tests

GitHub Actions — Build workflow

To show the power and simplicity of GitHub Actions I’ll show you the Build workflow which we use for our new, emerging open source project: BPMN Visualization.
Feel free to preview the original workflow configuration file (build.yml) directly in the GitHub repository.

name: Build

on:
push:
branches:
- master
paths-ignore:
- '.path1'
- '.path2'
pull_request:
branches:
- master
paths-ignore:
- '.path1'
- '.path2'
  • actions/setup-node@v1 — Then, setup node environment with the specified version
  • next steps are simply node commands that install dependencies and execute quality assurance checks on the codebase:
  • npm ci — install dependencies
  • npm run lint-check — lint the code
  • npm run build — build the application
  • npm run test:unit — run unit tests
  • npm run test:e2e — run e2e tests
jobs:
build:
runs-on: ${{ matrix.os.name }}
strategy:
# we want to run the full build on all os: don't cancel running jobs even if one fails
fail-fast: false
matrix:
# we define the matrix of systems on which we want to perform the build job
os:
- { name: ubuntu-latest}
- { name: macos-latest }
- { name: windows-latest }
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Verify node, npm version
run: |
node --version
npm --version
- name: Install dependencies
run: npm ci
- name: Lint check
run: npm run lint-check
- name: Build Application
run: npm run build
- name: Test Application
run: npm run test:unit
- name: Test Application End to End
run: npm run test:e2e

Conclusion

As you can see, using GitHub Actions is very simple and it’s well documented. The creation of the basic workflow that really does the job is a matter of minutes and saves us hours of time normally lost on repetitive tasks. I hope this is clear enough but if you have any questions don’t hesitate to pose them in the comment section.
As this is an open source project, our team invites you to join the community and contribute: https://github.com/process-analytics/bpmn-visualization-js.

Bonitasoft helps innovative companies worldwide deliver better digital user experiences — for customers and employees — on the Bonita application platform.