38 lines
2.8 KiB
Markdown
38 lines
2.8 KiB
Markdown
# React Setup Skill (Vite + Django Backend)
|
|
|
|
Spin up a fresh React app (Vite) that talks to a Django backend over HTTPS with correct CORS/CSRF handling, Axios defaults, and a basic router/layout scaffold.
|
|
|
|
## What This Skill Does
|
|
- Initializes a new Vite React project in `frontend/`.
|
|
- Configures `vite.config.js` for HTTPS dev using mkcert certs from `certs/`, port 5173, and proxying `/api` to `https://localhost:8000`.
|
|
- Adds CSRF service and Axios interceptors that inject `X-CSRFToken` for mutating requests.
|
|
- Sets up React Router layout (`Root`), navbar/footer, home page, and backend health check component that verifies CSRF + `/api/health/`.
|
|
- Provides a minimal API config file to centralize endpoints.
|
|
- Validates the build with `npm --prefix ./frontend run build`.
|
|
|
|
## Prerequisites
|
|
- Django backend running over HTTPS (see `django-setup` skill) with endpoints `/api/csrf/` and `/api/health/`.
|
|
- mkcert certificates stored in project `certs/` (key/cert filenames discovered in skill steps).
|
|
- Node.js 18+ and npm available.
|
|
|
|
## Setup Summary (see SKILL.md for exact commands)
|
|
1) **Create project**: `npm create vite@latest frontend -- --template react --yes`; then `npm --prefix ./frontend install react-router-dom axios`.
|
|
2) **Configure `vite.config.js`**: import `fs`/`path`; load mkcert key/cert from `certs/`; set `server.https`, `server.port=5173`, and proxy `/api` → `https://localhost:8000` with `secure:false`.
|
|
3) **API config** `src/config/api.js`: export `API_BASE_URL` (empty to use proxy) and `ENDPOINTS` with `CSRF: '/api/csrf/'`.
|
|
4) **CSRF service** `src/services/csrf.js`: fetch `/api/csrf/` once, read `csrftoken` cookie, cache/token helpers.
|
|
5) **Axios instance** `src/services/api.js`: `withCredentials:true`, JSON headers; request interceptor adds `X-CSRFToken` via `getCsrfToken()` for POST/PUT/PATCH/DELETE.
|
|
6) **UI scaffold**: navbar/footer components; `Root` layout with `Outlet`; `Home` page using `BackendStatus` component that pings CSRF then `/api/health/`.
|
|
7) **Routing**: `src/router/AppRoutes.jsx` exports `createAppRouter()` config; `src/router/index.jsx` wraps `RouterProvider`; `App.jsx` renders `<Router />`.
|
|
8) **Verify**: `npm --prefix ./frontend run build` to ensure config/imports succeed.
|
|
|
|
## Outputs/Artifacts
|
|
- Vite React app under `frontend/` with HTTPS dev server ready to hit Django.
|
|
- `vite.config.js` with mkcert HTTPS + API proxy.
|
|
- Axios + CSRF utilities wired for Django session auth.
|
|
- Minimal router/layout/pages demonstrating backend connectivity.
|
|
|
|
## Notes & Gotchas
|
|
- Make sure `certs/` exists and filenames match what mkcert generated; update `vite.config.js` accordingly.
|
|
- Backend must expose `/api/csrf/` to set the `csrftoken` cookie; otherwise Axios interceptor will fail.
|
|
- If you change backend host/port, update the proxy target in `vite.config.js` and any hardcoded `FRONTEND_URL` on the Django side.
|