78 lines
2.4 KiB
Markdown
78 lines
2.4 KiB
Markdown
# APLP Frontend — Setup
|
|
|
|
| | |
|
|
| --- | --- |
|
|
| **Status** | Phase 0 hoàn tất — repo đã khởi tạo Vite + React + TS |
|
|
|
|
## 1. Prerequisites
|
|
|
|
- Node.js 18+ (chọn LTS, xác nhận khi khởi tạo)
|
|
- npm/pnpm (chọn 1 — candidate npm)
|
|
- Backend chạy local (xem `docs/SETUP.md` của `aplp.backend.spring`)
|
|
|
|
## 2. Cấu trúc dự án dự kiến
|
|
|
|
```text
|
|
aplp.frontend.react/
|
|
├── README.md
|
|
├── docs/ # frontend docs
|
|
│ ├── PHASES.md # công việc frontend theo phase APLP
|
|
│ ├── ARCHITECTURE.md
|
|
│ ├── CONVENTIONS.md
|
|
│ └── SETUP.md
|
|
├── index.html
|
|
├── vite.config.ts
|
|
├── package.json
|
|
├── tsconfig.json
|
|
├── .env.example
|
|
├── public/
|
|
└── src/
|
|
├── app/
|
|
├── api/
|
|
├── features/...
|
|
├── shared/
|
|
└── types/
|
|
```
|
|
|
|
## 3. Khởi tạo (Phase 0)
|
|
|
|
> Repo hiện tại là template trống từ GitLab. Các bước dưới sẽ thực hiện khi bắt đầu Phase 0.
|
|
|
|
1. Khởi tạo React + TypeScript app (candidate: Vite): `npm create vite@latest . -- --template react-ts`
|
|
2. Thêm `react-router-dom`, axios, TanStack Query, Zustand, tooling lint/test.
|
|
3. Tạo config env mẫu `.env.example`: `VITE_API_BASE_URL=http://localhost:8080/api`
|
|
4. Dựng api client + auth flow + ProtectedRoute (an toàn tương ứng Phase 0).
|
|
5. Tạo folder structure theo `docs/ARCHITECTURE.md`.
|
|
6. Viết README chính thức thay template GitLab.
|
|
7. Kiểm tra: `npm run lint`, `npm run typecheck`, `npm test`, `npm run dev` build ok.
|
|
|
|
> ✅ Đã thực hiện xong. Xem `README.md` cho cấu trúc và scripts hiện tại.
|
|
|
|
## 4. Local Dev Flow
|
|
|
|
- Backend chạy local (port 8080 ví dụ).
|
|
- Chạy frontend: `npm run dev` → mở địa chỉ Vite.
|
|
- Env qua file `.env` (không commit; chỉ commit `.env.example`).
|
|
|
|
## 5. Environment Example
|
|
|
|
```env
|
|
VITE_API_BASE_URL=http://localhost:8080/api
|
|
VITE_APP_NAME=APLP
|
|
```
|
|
|
|
## 6. Verification Checklist (khi có code)
|
|
|
|
- [ ] `npm run lint` pass
|
|
- [ ] `npm run typecheck` pass
|
|
- [ ] `npm test` pass
|
|
- [ ] `npm run build` pass
|
|
- [ ] Login → protected route đúng, refresh token hoạt động
|
|
|
|
## 7. Open Questions
|
|
|
|
| ID | Question | Status |
|
|
| --- | --- | --- |
|
|
| SET-001 | npm hay pnpm? | Open (candidate npm) |
|
|
| SET-002 | Node version quản lý (nvm)? | Open |
|
|
| SET-003 | Deploy target (nginx/container/Vercel)? | Open | |