How to Create GitHub Actions - Build & Test your Application on Pull Requests

Preparation before deployment and merging is important. To avoid downtimes and unknown issues we must build systems or processes that will help us avoid them. One simple, yet effective step is to create GitHub Actions that builds and tests our application.

It's going to be a short article, if you're not interested in how and why it works, just jump to the code snippet and copy/paste in your code at .github/workflows/prepare.yaml, and everything will be working.

GitHub Action template

What I use in most of my repositories is that I divide actions into different yaml files, as mostly the testing part will be much more complex than the build. Simplicity will make us do it in one file here, and you can improve and upgrade it.

Let's go step by step:

• Go to your GitHub repository and at top-level, create a folder named .github (don't forget the dot in front)
• Inside the .github folder create another one named workflows
• Inside it make a file named prepare.yaml

Your structure should look like this - .github/workflows/prepare.yaml. Inside this file, we'll write our action that will be automatically triggered by GitHub on given conditions. Let's assume we have a JS/TS or project with test/build commands in their package.json as shown below.

  "scripts": {
    "build": "next build",
    "test": "jest"
  }

What we're going to do is paste the below code and explain what each part does.

on:
  pull_request:
    types:
      - opened
      - synchronize
    branches:
      - "master"
      - "develop"

name: Prepare

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 8
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - uses: actions/setup-node@v3
        with:
          node-version: "20.9"

      - name: Install dependencies
        run: npm install

      - name: Run build
        run: npm run build

      - name: Run Tests
        run: npm run test

Firstly we need to define what type of event we want to trigger our action. As shown we wrote pull_request in our case. Let's dive a little bit deeper.

• Types - we defined opened and synchronize. This is for when a PR is opened or on pushing or modifying it in some way.
• Branches - clearly a set of branches in which we care about the action to be triggered

Naming our job Prepare will help us know from which action this is as shown in the photo below. (It's failed as this on an empty repository with no install/build/test commands)

We need to checkout our code and install node. It's important to make npm install as to validate that all dependencies are correctly working. The next steps are just basic commands from your package.json as build and test.

It's this simple to add more protection to your project with GitHub actions. You can do really complex stuff with actions and I'm going to write more advanced articles about utilizing them. If you liked the article you can follow me or just leave a message on Twitter/X. It helps me get more ideas about what to write.