How to Test Build Output

Steps

Overview

1. Build CSS on main.
2. Build CSS on relevant branch to test.
3. Confirm that built files have expected difference (if any is expected).

Unabridged

1. Checkout main:
   • git checkout main
2. Install dependencies: npm ci.
3. Build CSS: npm run build.
4. Confirm there is no error output.
5. Copy built CSS to temporary directory for comparison:*
   • cp -r dist dist.test
6. Add/stage the new build.test directory (so you can compare them when it changes):
   • git add dist.test
7. Checkout the branch to test.
8. Install dependencies: npm ci.
9. Build CSS: npm run build.
10. Confirm there is no error output.
11. Overwrite previously copied built CSS with copy of newly built CSS:*†
    • rsync -a --delete dist/ dist.test/
12. Review diff of build.test/'s files in working directory to staging/index.
    • git diff
13. Ensure only expected differences‡ appear.

---

Footnotes

* This is done so you can later compare the changes between built files on two branches using git diff (n.b. you copy the build directory so it can be tracked with Git because the build directory is ignored by Git).

† Use rsync to avoid OSX cp issues.

‡ Refer to the PR or issue which linked you to this guide.