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>
1.9 KiB
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
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:
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.