163 lines
10 KiB
Markdown
163 lines
10 KiB
Markdown
# Backoffice Preventivi — Architettura, ambienti e deploy
|
|
|
|
Questo documento descrive il sistema di preventivi collegato al configuratore: come sono collegati i tre
|
|
componenti, come gestiscono le porte/URL in sviluppo, e cosa serve per portarlo in produzione.
|
|
|
|
Per il modello dati, l'API e il flusso applicativo dettagliato vedi [`backoffice/README.md`](../backoffice/README.md).
|
|
Per il contratto dei parametri URL del configuratore vedi [`URL_PARAMS.md`](./URL_PARAMS.md).
|
|
|
|
## Architettura: tre componenti separati
|
|
|
|
```
|
|
┌─────────────────────┐ POST /api/carrello/aggiungi ┌──────────────────────┐
|
|
│ Configuratore 3D │ ───────────────────────────────────────▶ │ Backend Laravel │
|
|
│ (root del repo, │ │ (backoffice/) │
|
|
│ Three.js + Vite) │ ◀─────────────────────────────────────── │ API + Filament │
|
|
└──────────┬───────────┘ GET /api/config (frontend url) └──────────┬────────────┘
|
|
│ │
|
|
│ link "Vai al preventivo" │ GET/DELETE/POST
|
|
│ https://<app-cliente>/?token=XXX │ /api/carrello/...
|
|
▼ ▼
|
|
┌──────────────────────┐ ┌──────────────────────┐
|
|
│ App cliente Vue │ ───────────────────────────────────────▶ │ (stesso backend) │
|
|
│ (backoffice/cliente)│ carrello + checkout │ │
|
|
└──────────────────────┘ └──────────────────────┘
|
|
```
|
|
|
|
Sono **tre processi indipendenti**, ognuno con il proprio server di sviluppo/deploy:
|
|
|
|
| Componente | Cartella | Tecnologia | Ruolo |
|
|
|---|---|---|---|
|
|
| Configuratore 3D | `/` (root repo) | Vite + Three.js | UI di configurazione prodotto, genera lo screenshot e invia il primo prodotto al carrello |
|
|
| Backend | `backoffice/` | Laravel 13 + Filament 3 | API carrello/preventivi, PDF, email, pannello admin |
|
|
| App cliente | `backoffice/cliente/` | Vue 3 + Vite | Riepilogo carrello, form contatti, conferma preventivo |
|
|
|
|
Il configuratore e l'app cliente **non si parlano mai direttamente**: comunicano solo passando dal backend
|
|
Laravel (il configuratore scrive nel carrello via API, l'app cliente lo legge via API). Il collegamento tra
|
|
i due frontend è un singolo `token` passato in query string nel link "Vai al preventivo".
|
|
|
|
## Il problema che questo documento previene
|
|
|
|
I tre servizi girano su porte/domini diversi. Storicamente questo ha causato due classi di bug:
|
|
|
|
1. **Porte di sviluppo che collidono silenziosamente** — Vite, se una porta è occupata, ne sceglie
|
|
un'altra automaticamente. Se due progetti hanno lo stesso default (era il caso: sia il configuratore
|
|
che l'app cliente avevano `port: 5174`), il secondo processo avviato scivola su un'altra porta senza
|
|
errori — e i link generati puntano alla porta sbagliata.
|
|
2. **URL di produzione indovinati o hardcoded** — se l'indirizzo di un servizio è scritto a mano nel
|
|
codice dell'altro, ogni cambio di dominio/porta richiede una modifica e un rebuild manuale, facile da
|
|
dimenticare.
|
|
|
|
Soluzione adottata: **porte fisse in sviluppo** (`strictPort: true`, fallisce rumorosamente invece di
|
|
scivolare) + **scoperta dinamica degli URL** dove possibile, invece di hardcoding.
|
|
|
|
## Porte di sviluppo (fisse)
|
|
|
|
| Servizio | Porta | Comando | Config |
|
|
|---|---|---|---|
|
|
| Configuratore | `5173` | `pnpm dev` (root) | [`vite.config.js`](../vite.config.js) — `server.port` + `strictPort: true` |
|
|
| App cliente | `5199` | `pnpm dev` (in `backoffice/cliente/`) | [`backoffice/cliente/vite.config.js`](../backoffice/cliente/vite.config.js) |
|
|
| Backend Laravel | `8000` | `php artisan serve --port=8000` (in `backoffice/`) | nessuna config fissa, va specificata al comando |
|
|
|
|
Con `strictPort: true`, se una porta è già occupata **l'avvio fallisce con un errore esplicito** invece di
|
|
spostarsi su un'altra porta a caso. Se capita, il fix è liberare la porta (o capire quale altro processo
|
|
la sta usando) — non serve più inseguire link rotti.
|
|
|
|
## Come i due frontend si trovano l'un l'altro
|
|
|
|
### App cliente → Backend
|
|
L'app cliente conosce l'indirizzo dell'API tramite `VITE_API_BASE` in
|
|
[`backoffice/cliente/.env`](../backoffice/cliente/.env) (default `http://localhost:8000/api`). È un valore
|
|
di build-time (Vite), va impostato per ambiente.
|
|
|
|
### Configuratore → Backend
|
|
Il configuratore conosce l'indirizzo dell'API tramite `VITE_PREVENTIVI_API_BASE`, letto a build-time da
|
|
`.env` / `.env.production` nella **root del repo** (vedi sezione successiva). È l'unico URL che deve essere
|
|
"noto a priori": da lì in poi il configuratore può fare domande al backend.
|
|
|
|
### Configuratore → App cliente (il pezzo dinamico)
|
|
Il configuratore **non conosce a priori** dove gira l'app cliente. All'avvio chiama:
|
|
|
|
```
|
|
GET {VITE_PREVENTIVI_API_BASE}/api/config
|
|
→ { "frontend_cliente_url": "http://localhost:5199" }
|
|
```
|
|
|
|
Il valore restituito viene letto da Laravel dalla variabile `APP_FRONTEND_CLIENTE_URL` nel suo `.env`
|
|
([`backoffice/config/preventivi.php`](../backoffice/config/preventivi.php)). Il link "Vai al preventivo"
|
|
viene costruito con questo valore, non con un default fisso nel bundle del configuratore.
|
|
|
|
**Implicazione pratica**: se l'app cliente cambia dominio/porta, basta aggiornare **una sola variabile**
|
|
lato Laravel (`APP_FRONTEND_CLIENTE_URL`) — il configuratore già in produzione la recepisce alla prossima
|
|
richiesta, senza rebuild.
|
|
|
|
Logica in [`src/js/starter.js`](../src/js/starter.js) (`configReady`, `mostraLinkPreventivo`,
|
|
`ripristinaLinkPreventivo`). Se il backend non è raggiungibile, resta un fallback locale
|
|
(`window.APP_CLIENTE_URL` se impostato, altrimenti `http://localhost:5199`) — solo per non rompere lo
|
|
sviluppo offline, non pensato per la produzione.
|
|
|
|
## Variabili d'ambiente per componente
|
|
|
|
### Configuratore (root del repo)
|
|
|
|
Attenzione: `vite.config.js` ha `root: 'src'` ma `envDir` è impostato esplicitamente sulla root del repo
|
|
(dove stanno anche `build.sh`/`deploy.sh`) — i file `.env*` vanno quindi creati **nella root del repo**, non
|
|
dentro `src/`.
|
|
|
|
| File | Tracciato in git? | Contenuto |
|
|
|---|---|---|
|
|
| `.env` | Sì | `VITE_PREVENTIVI_API_BASE=http://localhost:8000/api` — default di sviluppo |
|
|
| `.env.production` | **No** (in `.gitignore`) | `VITE_PREVENTIVI_API_BASE=<url reale dell'API in produzione>` — va creato a mano prima del deploy |
|
|
| `.env.production.example` | Sì | Traccia/promemoria del formato atteso, da copiare in `.env.production` |
|
|
|
|
`pnpm build` (production mode di Vite) usa `.env.production` se presente. **`build.sh` blocca la build se
|
|
`.env.production` manca**, per evitare di deployare per sbaglio con `localhost` incorporato nel bundle.
|
|
|
|
Override runtime senza rebuild (usato raramente, es. hotfix): impostare `window.PREVENTIVI_API_BASE` /
|
|
`window.APP_CLIENTE_URL` in uno script inline prima del bundle in `index.html` — ha priorità sul valore di
|
|
build.
|
|
|
|
### Backend Laravel (`backoffice/.env`)
|
|
|
|
| Variabile | Descrizione | Dev | Produzione |
|
|
|---|---|---|---|
|
|
| `APP_URL` | URL pubblico del backend stesso (usato per link nelle email e asset Filament) | `http://localhost:8000` | URL reale del backend |
|
|
| `APP_FRONTEND_CLIENTE_URL` | URL dell'app cliente — letto da `/api/config` | `http://localhost:5199` | URL reale dell'app cliente |
|
|
| `ADMIN_NOTIFY_EMAIL` | Email che riceve la notifica di nuovo preventivo | — | email reale dell'admin |
|
|
| `CORS_ALLOWED_ORIGINS` | Origini autorizzate a chiamare l'API | `*` (di default, comodo in dev) | **da restringere** alle origini reali di configuratore + app cliente, separate da virgola |
|
|
| `DB_*` | MySQL: `127.0.0.1` / `root` / nessuna password / `kreios_preventivi` in locale | — | credenziali del DB di produzione |
|
|
| `MAIL_*` | `MAIL_MAILER=log` in dev (le email finiscono in `storage/logs/laravel.log`) | — | SMTP reale |
|
|
|
|
### App cliente (`backoffice/cliente/.env`)
|
|
|
|
| Variabile | Descrizione | Dev | Produzione |
|
|
|---|---|---|---|
|
|
| `VITE_API_BASE` | URL base dell'API Laravel | `http://localhost:8000/api` | URL reale dell'API |
|
|
|
|
## Checklist di deploy in produzione
|
|
|
|
1. **Backend Laravel** (`backoffice/`)
|
|
- `.env` di produzione: `APP_URL`, `APP_FRONTEND_CLIENTE_URL`, `DB_*`, `MAIL_*`, `ADMIN_NOTIFY_EMAIL`.
|
|
- Restringere `CORS_ALLOWED_ORIGINS` alle origini reali (non lasciare `*`).
|
|
- `php artisan migrate --force`, `php artisan storage:link`, `php artisan config:cache`.
|
|
2. **App cliente** (`backoffice/cliente/`)
|
|
- `cliente/.env` (o `.env.production`) con `VITE_API_BASE` reale.
|
|
- `pnpm build`, deploy dei file statici generati.
|
|
3. **Configuratore** (root del repo)
|
|
- `cp .env.production.example .env.production` e impostare `VITE_PREVENTIVI_API_BASE` reale.
|
|
- `./build.sh` (fallisce se `.env.production` manca) → `./deploy.sh`.
|
|
- **Non serve** impostare l'URL dell'app cliente qui: viene letto da `/api/config` a runtime.
|
|
4. Verifica end-to-end: configurare un prodotto → "Aggiungi al preventivo" → il link "Vai al preventivo"
|
|
deve puntare al dominio reale dell'app cliente → completare il checkout → verificare che il preventivo
|
|
compaia nel backoffice Filament e che le email (cliente + admin) siano state inviate.
|
|
|
|
## Riferimenti file
|
|
|
|
- [`src/js/starter.js`](../src/js/starter.js) — integrazione configuratore↔backend, scoperta dinamica dell'URL app cliente.
|
|
- [`vite.config.js`](../vite.config.js) — porta fissa, `envDir`.
|
|
- [`backoffice/routes/api.php`](../backoffice/routes/api.php) — endpoint `/api/config` e `/api/carrello/*`.
|
|
- [`backoffice/config/preventivi.php`](../backoffice/config/preventivi.php) — sorgente di `frontend_cliente_url`.
|
|
- [`backoffice/config/cors.php`](../backoffice/config/cors.php) — origini autorizzate.
|
|
- [`build.sh`](../build.sh) — guardia su `.env.production`.
|
|
- [`backoffice/README.md`](../backoffice/README.md) — setup locale, modello dati, API, branding.
|