287build/gh pages

[bourgeoa]

Fix webpack chunk loading for GitHub Pages deployment

Problem

With webpack code splitting enabled, chunk files (e.g., 841.mashlib.js) were failing to load on GitHub Pages:

• ❌ GitHub Pages: https://solidos.github.io/mashlib/dist/browse.html - chunks tried to load from https://solidos.github.io/841.mashlib.js instead of https://solidos.github.io/mashlib/dist/841.mashlib.js

Error: ChunkLoadError: Loading chunk 841 failed

Root cause: Webpack's publicPath was set to / (absolute root), which works fine for localhost but not for GitHub Pages where files are deployed under /mashlib/dist/.

Solution

Added environment-based publicPath configuration to support both deployment environments:

• Default: publicPath: '/' for localhost deployments
• GitHub Pages: publicPath: '/mashlib/dist/' via PUBLIC_PATH environment variable

Changes

1. webpack.config.mjs

Updated publicPath to read from environment variable:

output: {
  path: path.resolve(process.cwd(), 'dist'),
  publicPath: process.env.PUBLIC_PATH || '/',
  library: {
    name: 'Mashlib',
    type: 'umd'
  },
},

2. package.json

Added new build script for GitHub Pages:

"build:ghpages": "npm run clean && npm run build-version && npm run typecheck && PUBLIC_PATH=/mashlib/dist/ npm run build-dist && npm run postbuild-js"

3. .github/workflows/ci.yml

Updated gh-pages job to rebuild with the correct publicPath:

gh-pages:
  needs: build
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main'
  steps:
    - uses: actions/checkout@v6
    - uses: actions/setup-node@v6
      with:
        node-version: 20
    - run: npm ci
    - run: npm run build:ghpages
    - uses: peaceiris/actions-gh-pages@v4
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: .

This ensures:

• The build job uses npm run build (default publicPath for npm package)
• The gh-pages job uses npm run build:ghpages (GitHub Pages specific publicPath)

Usage

For localhost deployment (default):

npm run build

Chunks will load from: /841.mashlib.js

For GitHub Pages deployment:

npm run build:ghpages

Chunks will load from: /mashlib/dist/841.mashlib.js

Testing

Both deployment scenarios now work correctly:

• ✅ Localhost: npm run build - chunks load from /841.mashlib.js
• ✅ GitHub Pages: npm run build:ghpages - chunks load from /mashlib/dist/841.mashlib.js