AFFAANhandClaude Opus 5
66cfa38076
Form.useWatch([], form) tracks getFieldsValue(), which returns {} on a step
with no mounted Form.Item. The Preview and Review steps have none, so on
entering Preview the creative memo recomputed to empty and previewed a blank
ad pointing at example.com, and the Review step rendered "-" for every field.
The submitted payload was always correct — submit() reads the preserved store
via getFieldsValue(true) — so this was a display and preview defect, not data
loss. Pass preserve: true so the watch tracks the whole store.
Also document VITE_META_AD_ACCOUNT_ID. Unset, it silently disables the
billing panel, the missing-payment-method warning, ad preview, and the
account-minimum budget check, with no diagnostic anywhere.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
63 lines
1.9 KiB
Markdown
63 lines
1.9 KiB
Markdown
# MaskanX Frontend
|
|
|
|
Independent React, TypeScript, and Vite frontend for MaskanX.
|
|
|
|
## Service Contract
|
|
|
|
- Default development URL: `http://127.0.0.1:5173`
|
|
- Backend API: configured with `VITE_MASKANX_API_URL`
|
|
- Local proxy target: configured with `VITE_MASKANX_PROXY_TARGET`
|
|
- Database access: none; this service never receives PostgreSQL credentials
|
|
|
|
## Local Setup
|
|
|
|
```powershell
|
|
npm install
|
|
Copy-Item .env.local.example .env.local
|
|
npm run local
|
|
```
|
|
|
|
Start `maskanx-backend` on port `8088` before using the full UI.
|
|
|
|
## Campaigns page
|
|
|
|
The Campaigns page needs `VITE_META_AD_ACCOUNT_ID` set to the Meta ad account
|
|
id (`act_<digits>`) in your `.env.*` file.
|
|
|
|
If it is unset the page still loads and lists campaigns, but four things are
|
|
silently unavailable: the ad-account billing panel, the warning shown when no
|
|
payment method is attached, ad preview in the wizard, and the account-minimum
|
|
budget check (the backend cannot look up `min_daily_budget` without an
|
|
account, so it skips that validation and logs a warning).
|
|
|
|
Ad preview also requires `META_ADS_ACCESS_TOKEN` to be configured on the
|
|
backend, in Settings > Environments.
|
|
|
|
## Commands
|
|
|
|
| Command | Purpose |
|
|
| --- | --- |
|
|
| `npm run start` | Preview the production build on port 5173 |
|
|
| `npm run build` | Type-check and build `dist/` |
|
|
| `npm run local` | Local Vite server using `.env.local` |
|
|
| `npm run dev` | Development server using `.env.development` |
|
|
| `npm run test` | Test-mode type-check and production build |
|
|
| `npm run lint` | ESLint checks |
|
|
| `npm run prod` | Production-mode preview |
|
|
|
|
Database migration and seed commands intentionally live in
|
|
`maskanx-backend`. A frontend must never own database credentials.
|
|
|
|
## Production
|
|
|
|
Build the container with the browser-visible backend URL:
|
|
|
|
```powershell
|
|
docker build `
|
|
--build-arg VITE_MASKANX_API_URL=https://api.example.com `
|
|
-t maskanx-frontend .
|
|
```
|
|
|
|
The backend must allow the deployed frontend origin through
|
|
`MASKANX_CORS_ORIGINS`.
|