mirror of
https://github.com/tiennm99/ai-coding-workflow-labs.git
synced 2026-09-17 22:20:44 +00:00
tiennm99
c13a529898
- Add box-shadow glow effect on tiles with value 128+ - Dynamic font sizing already implemented in Epic 4 responsive work (Story 5.2 = no-op) - Set Vite base path to /try-bmad/ for GitHub Pages - Add GitHub Actions workflow for automated deploy on push to main - Production bundle 22.4KB gzipped (under 50KB target)
88 lines
3.1 KiB
Markdown
88 lines
3.1 KiB
Markdown
# Story 5.3: GitHub Pages Deployment
|
|
|
|
Status: done
|
|
|
|
## Story
|
|
|
|
As a developer,
|
|
I want the game automatically deployed to GitHub Pages on push to main,
|
|
so that the game is publicly accessible without manual deployment steps.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Given the Vite config, when the production build runs, then the `base` option is set to the repository name for correct asset paths on GitHub Pages, and `npm run build` produces a `dist/` directory
|
|
2. Given a `.github/workflows/deploy.yml` workflow file, when code is pushed to the main branch, then GitHub Actions runs `npm ci`, `npm run build`, and deploys the `dist/` directory to GitHub Pages
|
|
3. Given the deployment completes, when a user visits the GitHub Pages URL, then the game loads and is fully playable with all assets loading correctly
|
|
4. Given the production bundle, then it is under 50KB gzipped (NFR4)
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Task 1: Set Vite base path for GitHub Pages (AC: #1)
|
|
- [x] Added `base: '/try-bmad/'` to vite.config.js
|
|
- [x] Verified dist/ output has correct `/try-bmad/` prefixed asset paths
|
|
- [x] Task 2: Create GitHub Actions deploy workflow (AC: #2)
|
|
- [x] Created `.github/workflows/deploy.yml` with actions/deploy-pages
|
|
- [x] Triggers on push to main, uses Node.js 20, npm ci, npm run build
|
|
- [x] Uses upload-pages-artifact + deploy-pages (modern approach, no gh-pages branch)
|
|
- [x] Task 3: Verify build and bundle size (AC: #1, #4)
|
|
- [x] Build succeeds, dist/ contains index.html + CSS + JS with correct paths
|
|
- [x] Gzipped bundle: 22.4KB total (well under 50KB)
|
|
- [x] All 90 tests pass
|
|
|
|
## Dev Notes
|
|
|
|
### Vite Config Change
|
|
|
|
Add `base` to vite.config.js:
|
|
```javascript
|
|
export default defineConfig({
|
|
base: '/try-bmad/',
|
|
plugins: [svelte(), tailwindcss()],
|
|
})
|
|
```
|
|
|
|
### GitHub Actions Workflow
|
|
|
|
Use the modern `actions/deploy-pages` approach (not gh-pages branch):
|
|
```yaml
|
|
permissions:
|
|
contents: read
|
|
pages: write
|
|
id-token: write
|
|
```
|
|
|
|
### Current Bundle Size
|
|
|
|
Last build: 22KB gzipped total (CSS 3.5KB + JS 18.5KB) — well under 50KB limit.
|
|
|
|
### Font Path Note
|
|
|
|
Font files in `public/fonts/` use absolute paths (`/fonts/ClearSans-*.woff2`). With `base: '/try-bmad/'`, Vite automatically prefixes static asset URLs, but `@font-face src: url('/fonts/...')` in CSS needs to work correctly. Vite handles this — URLs starting with `/` in CSS are resolved relative to the `base` path in production builds.
|
|
|
|
### FRs Covered
|
|
|
|
- FR31: GitHub Pages deployment
|
|
|
|
### References
|
|
|
|
- [Source: _bmad-output/planning-artifacts/epics.md — Epic 5, Story 5.3]
|
|
- [Source: _bmad-output/planning-artifacts/architecture.md — Infrastructure & Deployment]
|
|
- [Source: vite.config.js — current config]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.6 (1M context)
|
|
|
|
### Debug Log References
|
|
|
|
### Completion Notes List
|
|
- Added `base: '/try-bmad/'` to vite.config.js for correct GitHub Pages asset paths
|
|
- Created `.github/workflows/deploy.yml` using modern actions/deploy-pages approach
|
|
- Build produces 22.4KB gzipped bundle (well under 50KB NFR4 limit)
|
|
- All 90 tests pass
|
|
|
|
### File List
|
|
- vite.config.js (modified — added base path)
|
|
- .github/workflows/deploy.yml (created — GitHub Actions deploy workflow)
|