This step by step guide will help you set up BundleMon with GitHub action

Clone repo

For this guide I used this repo: https://github.com/Yog9/SnapShot

git clone https://github.com/Yog9/SnapShot

Build

yarn build

Add BundleMon

yarn add -D bundlemon

Add BundleMon config

Create a file new file .bundlemonrc.json

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.*.js",
      "maxSize": "1kb"
    }
  ]
}

Run BundleMon

yarn bundlemon

Ignore hash in file name

Changing app code will cause webpack to generate a new hash for files that have been changed.

main.e0277e23.chunk.js -> main.c2a935b4.chunk.js

In order for BundleMon to know it's the same file you need to add <hash> string to file path config:

{
  "baseDir": "./build",
  "files": [
    {
      "path": "index.html"
    },
    {
      "path": "static/js/*.<hash>.chunk.js",
      "maxPercentIncrease": 10
    },
    {
      "path": "static/js/runtime-main.<hash>.js",
      "maxSize": "1kb"
    }
  ]
}

GitHub action

1. Install BundleMon GitHub App

2. Create a new file .github/workflows/build.yml

   name: Build
   
   on:
     push:
       branches: [main]
     pull_request:
       types: [synchronize, opened, reopened]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: Use Node.js 20
           uses: actions/setup-node@v2-beta
           with:
             node-version: '20'
   
         - name: Install dependencies
           run: yarn
   
         - name: Build
           run: yarn build
   
         - name: BundleMon
           uses: lironer/bundlemon-action@v1

Add GitHub outputs

"reportOutput": ["github"]

// or override default options

"reportOutput": [
  [
    "github",
    {
      "checkRun": false,
      "commitStatus": true,
      "prComment": true
    }
  ]
]

When creating your first PR with BundleMon you should see all files found by BundleMon as "Added", because there isn't a record on your main branch.

Once you merge the PR BundleMon will keep a record on your main branch, so on your next PR you should see the difference between the PR and your main branch.