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:
2026-03-01 18:00:43 +01:00
parent 0760a8284d
commit ff7a67cb58
20 changed files with 2811 additions and 19161 deletions

View File

@@ -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

View File

@@ -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
```
---

View File

@@ -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:**

View File

@@ -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

View File

@@ -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! 🚀