Skip to content

Commit 73973bb

Browse files
authored
[add] Instruction document for GitHub copilot
1 parent fba9a37 commit 73973bb

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

.github/copilot-instructions.md

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
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

Comments
 (0)