Configure CI Steps With GitHub

Early this year, I worked on a Vue and Supabase project template and I thought it’d be a good idea to automate a few steps, as the community accepts as best practices.

I’ll describe two of them to showcase how to use GitHub actions to perform those steps automatically when a triggering event occurs on my repository.

Check that Code Builds

Often, we implement a best practice to have some automation to check that code pushed to a repository works for everyone.

Hence, when a programmer submits a pull request to merge his code modifications to the develop branch and to guarantee his branch builds with success, we trigger a build automatically and it’ll run the appropriate build command for the project.

On my project, I need to run npm run build.

The Trigger

In GitHub actions, you define the trigger as follows.

1
2
3
4
5


on:
  pull_request:
    branches:
      - develop
    types: [opened, synchronize, reopened]

It targets the develop branch in the context of a pull request. It triggers only on opened or reopened pull requests. It also triggers when some new code is pushed to the feature branch we want to merge to develop only while a pull request exists between the two. This latter use case often occurs when developers review each other’s code and suggest code updates.

The Steps

Next, we define the steps to run:

The Checkout code step pulls the repository’s code into the workflow runner.
The Setup Node.js step installs the latest LTS version of Node.js and enables npm caching for faster installs.
The Install dependencies step installs all required npm packages using npm ci for a clean, reproducible setup.
The Run build steps executes the project’s build process using npm run build.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Run build
        run: npm run build

Test It

Create a YAML file pr-build.yml containing the snippets described above into a folder .github/workflows at the root of your project.

Then push the feature branch and create a pull request. It should trigger the GitHub Action.

Create a Semantic Release

This workflow requires a more complex setup, but I’ll guide you through it, step by step as usual.

Stay tuned!

I’ve planned an article about Semantic Realase topic in February 2026. It’ll complement well to this GitHub Action.

For now, let me comment in the YAML code below the important parts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


# release.yml
name: Automatic Release
run-name: ${{ github.actor }} is automatically releasing 🚀

on:
  # The GitHub Action will run automatically on pushes to
  # the main branch for example, when you merge a pull request
  # from develop branch to the main branch.
  # It supposes that the develop and main branch are protected,
  # meaning that you cannot directly push to those branches without
  # going through a pull request.
  push:
    branches:
      - main

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    environment:
      # This is the name of your environment created under https://github.com/{user}/{repo_name}/settings/environments/
      # The name must match in the YAML code and the settings
      name: CI
    steps:
      # Using the enviroment secret variables defined in the
      # under https://github.com/{user}/{repo_name}/settings/environments/
      # we'll generate a token used to allow the semantic release
      # step to edit the CHANGELOG.md file on the release
      # creation (see step "Semantic Release" below)
      - name: "Generate token"
        id: generate_token
        uses: tibdex/github-app-token@v1
        with:
          app_id: ${{ secrets.GH_APP_ID }}
          private_key: ${{ secrets.GH_APP_KEY }}
      # Check out the code to be able to run the release
      # creation as it requires some npm packages
      - name: Checkout
        uses: actions/checkout@v4
        with:
          persist-credentials: false
          fetch-depth: 0
          ref: ${{ github.event.pull_request.base.ref }}
      # Setting up Node LTS
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "lts/*"
          cache: "npm"
      # Make sure all the dependencies are ok and installed,
      # in particular the semantic release packages
      - name: "Installing dependencies"
        run: npm ci
      - name: "Verifying the signatures"
        run: npm audit signatures
      # Execute the semantic release creation
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v4
        # We use the token generated on the first step here.
        env:
          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}

Stay tuned for the full details to set up the project with a semantic release and configure it to your needs. The article is scheduled for February 9, 2026.

Conclusion

You can do a lot more with GitHub Actions, but this is a good start!

What do you use GitHub Actions for your day-to-day tasks?

Follow me

Thanks for reading this article. Make sure to follow me on X, subscribe to my Substack publication and bookmark my blog to read more in the future.

Photo by Pixabay.