Deployment

Quick Reference — 1 lần setup Supabase, deploy frontend lên Cloudflare Pages, build từ npm run build.

1. Tổng quan môi trường

Env	Frontend	Backend	URL
Prototype	Cloudflare Pages	– (HTML static)	https://boxme-workforce-planner.pages.dev
MVP staging	Cloudflare Pages	Supabase project (staging)	tbd
MVP prod	Cloudflare Pages	Supabase project (prod)	tbd

2. Pre-requisites

• Node ≥ 20, npm ≥ 10
• Supabase CLI ≥ 1.150
• Tài khoản Cloudflare có access vào project boxme-workforce-planner

3. Setup Supabase

cd wfp-v2
npm install
npx supabase login
npx supabase link --project-ref <your-project-ref>
npm run supabase:reset    # apply all migrations
npm run seed              # load demo data

WARNING

supabase:reset xoá toàn bộ DB. Chỉ chạy ở local hoặc staging mới.

4. Env vars

Tạo wfp-v2/.env:

VITE_SUPABASE_URL=https://<project>.supabase.co
VITE_SUPABASE_ANON_KEY=<anon-key>
VITE_APP_ENV=staging

Tham chiếu: src/lib/env.ts.

5. Build & test gate

npm run typecheck   # phải pass
npm test            # phải pass
npm run build       # output: wfp-v2/dist

Không deploy nếu 1 trong 3 lệnh trên fail.

6. Deploy Cloudflare Pages

Tự động (Git push)

# Cloudflare Pages auto-deploy khi push lên branch `main`
# Build command: cd wfp-v2 && npm install && npm run build
# Output dir:    wfp-v2/dist
git push origin main

Thủ công (wrangler)

cd wfp-v2
npm run build
npx wrangler pages deploy dist --project-name boxme-workforce-planner

7. Demo reset (chạy lại từ seed)

npm run demo:reset   # reset DB + reseed snapshot

Snapshot ở wfp-v2/dist/seed-snapshot.json — commit theo repo.

8. Smoke test sau deploy

Bước	Kỳ vọng
Mở URL	Trang login hiển thị
Login với user demo	Redirect về /
Vào /planner/forecast	Bảng có data
Vào /planner/forecast/review	Có ≥ 1 adjustment ở NEW/SEEN
Vào /admin/config	Có 3 nhóm: Monthly, Event, UPH

Chi tiết: Hướng dẫn kiểm thử MVP

9. Rollback

Cloudflare Pages giữ N deployment gần nhất → vào dashboard, chọn deploy cũ → "Rollback to this deployment".

DB rollback: dùng Supabase point-in-time recovery (bật sẵn ở plan Pro).

10. Monitoring (gợi ý post-MVP)

• Supabase: built-in logs, query analyzer
• Sentry cho frontend errors
• Cloudflare Analytics cho traffic + Web Vitals