chore(frontend): migrate from npm to Bun for dependency management and scripts
- Updated README to replace npm commands with Bun equivalents. - Added `bun.lock` file to track Bun-managed dependencies.
This commit is contained in:
@@ -35,7 +35,7 @@
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm run generate:api
|
||||
bun run generate:api
|
||||
```
|
||||
|
||||
This fetches the OpenAPI spec from the backend and generates TypeScript types and API client functions.
|
||||
@@ -894,7 +894,7 @@ apiClient.interceptors.request.use((config) => {
|
||||
**Solution**: Regenerate API client to sync with backend
|
||||
|
||||
```bash
|
||||
npm run generate:api
|
||||
bun run generate:api
|
||||
```
|
||||
|
||||
### 9.4 Stale Data
|
||||
|
||||
@@ -1300,7 +1300,7 @@ import Image from 'next/image';
|
||||
**Bundle Size Monitoring:**
|
||||
|
||||
```bash
|
||||
npm run build && npm run analyze
|
||||
bun run build && bun run analyze
|
||||
# Use webpack-bundle-analyzer to identify large dependencies
|
||||
```
|
||||
|
||||
@@ -1362,8 +1362,8 @@ npm run build && npm run analyze
|
||||
**Regular Audits:**
|
||||
|
||||
```bash
|
||||
npm audit
|
||||
npm audit fix
|
||||
bun audit
|
||||
bun audit fix
|
||||
```
|
||||
|
||||
**Automated Scanning:**
|
||||
@@ -1496,11 +1496,11 @@ npm audit fix
|
||||
FROM node:20-alpine
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci --only=production
|
||||
RUN bun install --frozen-lockfile --only=production
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
RUN bun run build
|
||||
EXPOSE 3000
|
||||
CMD ["npm", "start"]
|
||||
CMD ["bun", "start"]
|
||||
```
|
||||
|
||||
### 14.2 Environment Configuration
|
||||
@@ -1536,15 +1536,15 @@ jobs:
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
run: bun install --frozen-lockfile
|
||||
- name: Run tests
|
||||
run: npm test
|
||||
run: bun test
|
||||
- name: Run linter
|
||||
run: npm run lint
|
||||
run: bun run lint
|
||||
- name: Type check
|
||||
run: npm run type-check
|
||||
run: bun run type-check
|
||||
- name: Build
|
||||
run: npm run build
|
||||
run: bun run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -908,16 +908,16 @@ Before committing code, always run:
|
||||
|
||||
```bash
|
||||
# Type checking
|
||||
npm run type-check
|
||||
bun run type-check
|
||||
|
||||
# Linting
|
||||
npm run lint
|
||||
bun run lint
|
||||
|
||||
# Tests
|
||||
npm test
|
||||
bun test
|
||||
|
||||
# Build check
|
||||
npm run build
|
||||
bun run build
|
||||
```
|
||||
|
||||
**In browser:**
|
||||
|
||||
@@ -59,7 +59,7 @@ cd frontend
|
||||
echo "NEXT_PUBLIC_DEMO_MODE=true" > .env.local
|
||||
|
||||
# Start frontend only (no backend needed)
|
||||
npm run dev
|
||||
bun run dev
|
||||
|
||||
# Open http://localhost:3000
|
||||
```
|
||||
@@ -233,7 +233,7 @@ MSW never initializes during Jest tests:
|
||||
- 97%+ coverage maintained
|
||||
|
||||
```bash
|
||||
npm test # MSW will NOT interfere
|
||||
bun test # MSW will NOT interfere
|
||||
```
|
||||
|
||||
### E2E Tests (Playwright)
|
||||
@@ -247,14 +247,14 @@ MSW never initializes during Playwright tests:
|
||||
- All E2E tests pass unchanged
|
||||
|
||||
```bash
|
||||
npm run test:e2e # MSW will NOT interfere
|
||||
bun run test:e2e # MSW will NOT interfere
|
||||
```
|
||||
|
||||
### Manual Testing in Demo Mode
|
||||
|
||||
```bash
|
||||
# Enable demo mode
|
||||
NEXT_PUBLIC_DEMO_MODE=true npm run dev
|
||||
NEXT_PUBLIC_DEMO_MODE=true bun run dev
|
||||
|
||||
# Test flows:
|
||||
# 1. Open http://localhost:3000
|
||||
@@ -304,7 +304,7 @@ NEXT_PUBLIC_APP_NAME=My Demo App
|
||||
```bash
|
||||
# netlify.toml
|
||||
[build]
|
||||
command = "npm run build"
|
||||
command = "bun run build"
|
||||
publish = ".next"
|
||||
|
||||
[build.environment]
|
||||
@@ -321,10 +321,10 @@ module.exports = {
|
||||
}
|
||||
|
||||
# Build
|
||||
NEXT_PUBLIC_DEMO_MODE=true npm run build
|
||||
NEXT_PUBLIC_DEMO_MODE=true bun run build
|
||||
|
||||
# Deploy to GitHub Pages
|
||||
npm run deploy
|
||||
bun run deploy
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
@@ -9,7 +9,7 @@ MSW (Mock Service Worker) handlers are **automatically generated** from your Ope
|
||||
```
|
||||
Backend API Changes
|
||||
↓
|
||||
npm run generate:api
|
||||
bun run generate:api
|
||||
↓
|
||||
┌─────────────────────────────────────┐
|
||||
│ 1. Fetches OpenAPI spec │
|
||||
@@ -30,7 +30,7 @@ src/mocks/handlers/
|
||||
When you run:
|
||||
|
||||
```bash
|
||||
npm run generate:api
|
||||
bun run generate:api
|
||||
```
|
||||
|
||||
The system:
|
||||
@@ -125,7 +125,7 @@ Overrides are applied FIRST, so they take precedence over generated handlers.
|
||||
|
||||
```bash
|
||||
# Backend adds new endpoint
|
||||
# 1. Run npm run generate:api
|
||||
# 1. Run bun run generate:api
|
||||
# 2. Manually add MSW handler
|
||||
# 3. Test demo mode
|
||||
# 4. Fix bugs
|
||||
@@ -136,7 +136,7 @@ Overrides are applied FIRST, so they take precedence over generated handlers.
|
||||
|
||||
```bash
|
||||
# Backend adds new endpoint
|
||||
npm run generate:api # Done! MSW auto-synced
|
||||
bun run generate:api # Done! MSW auto-synced
|
||||
```
|
||||
|
||||
### ✅ Always In Sync
|
||||
@@ -202,11 +202,11 @@ frontend/
|
||||
2. **Regenerate clients:**
|
||||
```bash
|
||||
cd frontend
|
||||
npm run generate:api
|
||||
bun run generate:api
|
||||
```
|
||||
3. **Test demo mode:**
|
||||
```bash
|
||||
NEXT_PUBLIC_DEMO_MODE=true npm run dev
|
||||
NEXT_PUBLIC_DEMO_MODE=true bun run dev
|
||||
```
|
||||
4. **Done!** New endpoint automatically works in demo mode
|
||||
|
||||
@@ -286,7 +286,7 @@ The generator (`scripts/generate-msw-handlers.ts`) does:
|
||||
|
||||
**Check:**
|
||||
|
||||
1. Is backend running? (`npm run generate:api` requires backend)
|
||||
1. Is backend running? (`bun run generate:api` requires backend)
|
||||
2. Check console for `[MSW]` warnings
|
||||
3. Verify `generated.ts` exists and has your endpoint
|
||||
4. Check path parameters match exactly
|
||||
@@ -324,7 +324,7 @@ npx tsx scripts/generate-msw-handlers.ts /tmp/openapi.json
|
||||
|
||||
### ✅ Do
|
||||
|
||||
- Run `npm run generate:api` after backend changes
|
||||
- Run `bun run generate:api` after backend changes
|
||||
- Use `overrides.ts` for complex logic
|
||||
- Keep mock data in `data/` files
|
||||
- Test demo mode regularly
|
||||
@@ -380,7 +380,7 @@ http.get(`${API_BASE_URL}/api/v1/users/me`, async ({ request }) => {
|
||||
### After (Automated)
|
||||
|
||||
```bash
|
||||
npm run generate:api # Done! All 31+ endpoints handled automatically
|
||||
bun run generate:api # Done! All 31+ endpoints handled automatically
|
||||
```
|
||||
|
||||
**Manual Code: 1500+ lines**
|
||||
@@ -399,6 +399,6 @@ npm run generate:api # Done! All 31+ endpoints handled automatically
|
||||
|
||||
**This template is batteries-included.**
|
||||
Your API client and MSW handlers stay perfectly synchronized with zero manual work.
|
||||
Just run `npm run generate:api` and everything updates automatically.
|
||||
Just run `bun run generate:api` and everything updates automatically.
|
||||
|
||||
That's the power of OpenAPI + automation! 🚀
|
||||
|
||||
Reference in New Issue
Block a user