|
| 1 | +# ActivityHub PWA - GitHub Copilot Instructions |
| 2 | + |
| 3 | +ActivityHub PWA is a React Progressive Web Application built with Next.js 15, TypeScript, Bootstrap, and Workbox. It serves as a project scaffold and includes features like markdown article rendering, component editors, pagination tables, and scroll lists. |
| 4 | + |
| 5 | +Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. |
| 6 | + |
| 7 | +## Critical Requirements |
| 8 | + |
| 9 | +⚠️ **MANDATORY NODE.JS VERSION**: This project requires **Node.js >=22**. The build will fail on older versions with errors like "Array.fromAsync is not a function". |
| 10 | + |
| 11 | +- Check Node.js version: `node --version` |
| 12 | +- If using Node.js <22, the build WILL FAIL but development server may still work with warnings |
| 13 | +- Development and linting commands work on Node.js 20+ but produce version warnings |
| 14 | + |
| 15 | +## Working Effectively |
| 16 | + |
| 17 | +### Initial Setup (REQUIRED for all development) |
| 18 | + |
| 19 | +1. **Install global pnpm**: `npm install -g pnpm` |
| 20 | +2. **Install dependencies**: `pnpm install` -- takes 3 minutes. NEVER CANCEL. Set timeout to 5+ minutes. |
| 21 | +3. **Verify setup**: `pnpm --version` (should be 10.x+) |
| 22 | + |
| 23 | +### Development Workflow (FULLY VALIDATED) |
| 24 | + |
| 25 | +- **Start development server**: `pnpm dev` -- starts in 5-15 seconds on http://localhost:3000 |
| 26 | +- **Run linting**: `pnpm lint` -- takes 15 seconds. NEVER CANCEL. Set timeout to 2+ minutes. |
| 27 | +- **Run tests**: `pnpm test` -- runs lint-staged + lint, takes 15 seconds. Set timeout to 2+ minutes. |
| 28 | + |
| 29 | +### Build Process (Node.js >=22 ONLY) |
| 30 | + |
| 31 | +- **Production build**: `pnpm build` -- FAILS on Node.js <22 with "Array.fromAsync is not a function" error |
| 32 | + - ❌ CONFIRMED: Fails on Node.js 20.x with TypeError during article page prerendering |
| 33 | + - ✅ Would work on Node.js >=22 (estimated 30s-2 minutes when working) |
| 34 | + - NEVER CANCEL. Set timeout to 5+ minutes when using proper Node.js version. |
| 35 | +- **Static export**: `pnpm export` -- builds and exports static files (also requires Node.js >=22) |
| 36 | + |
| 37 | +### Docker Commands (May Fail Due to Network Issues) |
| 38 | + |
| 39 | +- **Build Docker image**: `pnpm pack-image` -- takes 5-15 minutes. NEVER CANCEL. Set timeout to 20+ minutes. |
| 40 | + - May fail due to certificate/network issues in restricted environments |
| 41 | + - Requires Docker daemon to be running |
| 42 | +- **Run container**: `pnpm container` -- removes existing container and starts new one |
| 43 | + |
| 44 | +## Validation Scenarios |
| 45 | + |
| 46 | +After making ANY changes, ALWAYS validate by running through these scenarios: |
| 47 | + |
| 48 | +### Manual Testing Requirements |
| 49 | + |
| 50 | +1. **Start development server**: `pnpm dev` and verify it starts without errors |
| 51 | +2. **Navigate to homepage**: Visit http://localhost:3000 and verify page loads with navigation menu |
| 52 | +3. **Test core pages**: |
| 53 | + - Component editor: http://localhost:3000/component (HTML and Block editors work) |
| 54 | + - Pagination table: http://localhost:3000/pagination (GitHub API calls may fail in restricted environments) |
| 55 | + - Scroll list: http://localhost:3000/scroll-list (may show runtime errors due to API restrictions) |
| 56 | + - Article example: http://localhost:3000/article (shows markdown article listing) |
| 57 | +4. **Test API endpoints**: Visit http://localhost:3000/api/hello and verify JSON response: `{"name":"John Doe"}` |
| 58 | +5. **Check responsive design**: Test mobile/desktop layouts with Bootstrap components |
| 59 | +6. **Verify PWA functionality**: Check service worker registration in dev tools (disabled in development) |
| 60 | + |
| 61 | +### Pre-commit Validation |
| 62 | + |
| 63 | +ALWAYS run before committing changes: |
| 64 | + |
| 65 | +```bash |
| 66 | +pnpm lint # Fix linting issues automatically |
| 67 | +pnpm test # Runs linting + staged file checks |
| 68 | +``` |
| 69 | + |
| 70 | +## Known Issues and Workarounds |
| 71 | + |
| 72 | +### Build Failures |
| 73 | + |
| 74 | +- **Symptom**: "Array.fromAsync is not a function" during build |
| 75 | +- **Cause**: Node.js version <22 |
| 76 | +- **Solution**: Upgrade to Node.js >=22 OR document that builds don't work in current environment |
| 77 | + |
| 78 | +### Docker Build Issues |
| 79 | + |
| 80 | +- **Symptom**: "self-signed certificate in certificate chain" or "SELF_SIGNED_CERT_IN_CHAIN" |
| 81 | +- **Cause**: Network restrictions or certificate issues |
| 82 | +- **Workaround**: Document as "Docker build fails due to network limitations" |
| 83 | + |
| 84 | +### Linting Warnings (Non-blocking) |
| 85 | + |
| 86 | +The following warnings appear but don't break builds: |
| 87 | + |
| 88 | +- Synchronous scripts warnings in \_document.tsx and NotFoundCard.tsx |
| 89 | +- TypeScript `any` type warnings in API files |
| 90 | +- Spell checker warnings for "reactbootstrap" and "dnpw" |
| 91 | + |
| 92 | +## Key Project Structure |
| 93 | + |
| 94 | +### Important Directories |
| 95 | + |
| 96 | +- `pages/` - Next.js pages and API routes |
| 97 | +- `components/` - Reusable React components |
| 98 | +- `styles/` - CSS and styling files |
| 99 | +- `public/` - Static assets (auto-generated PWA files) |
| 100 | +- `.github/workflows/` - CI/CD configuration |
| 101 | + |
| 102 | +### Configuration Files |
| 103 | + |
| 104 | +- `package.json` - Dependencies and scripts |
| 105 | +- `next.config.ts` - Next.js configuration with PWA, MDX, and Sentry |
| 106 | +- `tsconfig.json` - TypeScript configuration |
| 107 | +- `eslint.config.ts` - ESLint configuration |
| 108 | +- `babel.config.js` - Babel configuration (disables SWC) |
| 109 | +- `docker-compose.yml` - Docker deployment setup |
| 110 | + |
| 111 | +### Environment Files |
| 112 | + |
| 113 | +- `.env` - Default environment variables (committed) |
| 114 | +- `.env.local` - Local overrides (gitignored, create as needed) |
| 115 | + |
| 116 | +Required environment variables for full functionality: |
| 117 | + |
| 118 | +``` |
| 119 | +NEXT_PUBLIC_SENTRY_DSN= |
| 120 | +SENTRY_ORG= |
| 121 | +SENTRY_PROJECT= |
| 122 | +``` |
| 123 | + |
| 124 | +## CI/CD Pipeline |
| 125 | + |
| 126 | +The project uses GitHub Actions (`.github/workflows/main.yml`) for deployment to Vercel. The pipeline: |
| 127 | + |
| 128 | +1. Runs on all branch pushes |
| 129 | +2. Deploys to Vercel if secrets are configured |
| 130 | +3. Production deployments happen on main branch |
| 131 | + |
| 132 | +Required GitHub secrets for CI: |
| 133 | + |
| 134 | +- `VERCEL_TOKEN` |
| 135 | +- `VERCEL_ORG_ID` |
| 136 | +- `VERCEL_PROJECT_ID` |
| 137 | + |
| 138 | +## Common Commands Reference |
| 139 | + |
| 140 | +### Package Management |
| 141 | + |
| 142 | +```bash |
| 143 | +pnpm install # Install dependencies (3+ minutes) |
| 144 | +pnpm --version # Check pnpm version |
| 145 | +``` |
| 146 | + |
| 147 | +### Development |
| 148 | + |
| 149 | +```bash |
| 150 | +pnpm dev # Start development server (15-30s) |
| 151 | +pnpm build # Production build (Node.js >=22 only, 30s-2min) |
| 152 | +pnpm start # Start production server |
| 153 | +pnpm export # Build and export static files |
| 154 | +``` |
| 155 | + |
| 156 | +### Code Quality |
| 157 | + |
| 158 | +```bash |
| 159 | +pnpm lint # Run ESLint with auto-fix (15s) |
| 160 | +pnpm lint:all # Lint all files |
| 161 | +pnpm test # Run tests (lint-staged + lint, 15s) |
| 162 | +``` |
| 163 | + |
| 164 | +### Docker |
| 165 | + |
| 166 | +```bash |
| 167 | +pnpm pack-image # Build Docker image (5-15min, may fail) |
| 168 | +pnpm container # Run Docker container |
| 169 | +``` |
| 170 | + |
| 171 | +## Troubleshooting |
| 172 | + |
| 173 | +### "Unsupported engine" Warnings |
| 174 | + |
| 175 | +- **Expected**: Warnings about Node.js version when <22 |
| 176 | +- **Impact**: Development works, builds fail |
| 177 | +- **Action**: Document in changes or upgrade Node.js |
| 178 | + |
| 179 | +### Build Hangs or Takes Too Long |
| 180 | + |
| 181 | +- **Never cancel builds or installs** - they may take several minutes |
| 182 | +- Set appropriate timeouts: installs (5min), builds (5min), Docker (20min) |
| 183 | +- Wait for completion rather than assuming failure |
| 184 | + |
| 185 | +### PWA Service Worker Issues |
| 186 | + |
| 187 | +- Service workers are disabled in development (`PWA support is disabled`) |
| 188 | +- Generated files in `public/` are gitignored (sw.js, workbox-\*.js) |
| 189 | +- Clear browser cache if PWA features don't work properly |
| 190 | + |
| 191 | +Always prioritize these instructions over generic Next.js or React guidance when working in this specific codebase. |
0 commit comments