2026-08-01 10:28:39 +05:30
|
|
|
# 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.
|
|
|
|
|
|
2026-08-02 19:45:59 +05:30
|
|
|
## 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.
|
|
|
|
|
|
2026-08-01 10:28:39 +05:30
|
|
|
## 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`.
|
