# Deployment Topology

🟢 **Decided 2026-06-13.** Four core domains, one API — plus a fifth surface
`ops.` added 2026-06-23 (🟢 Vue 3 SPA; see below & decision log).

```
   ┌──────────────────────────┐   ┌──────────────────────────┐   ┌──────────────────────────┐
   │ www.loveatfirstfight.com │   │ app.loveatfirstfight.com │   │admin.loveatfirstfight.com│
   │ ──────────────────────── │   │ ──────────────────────── │   │ ──────────────────────── │
   │  Nuxt (Vue SSR)          │   │  Vue 3 SPA               │   │  Vue 3 SPA               │
   │  PUBLIC — SEO matters    │   │  CUSTOMER / MEMBER area  │   │  STAFF / ADMIN           │
   │  • marketing pages       │   │  • login / dashboard     │   │  • CRM, orders, refunds  │
   │  • funnels / quizzes     │   │  • my courses / lessons  │   │  • course authoring      │
   │  • landing / opt-ins     │   │  • account / billing     │   │  • automations / reports │
   └────────────┬─────────────┘   └────────────┬─────────────┘   └────────────┬─────────────┘
                │                               │                              │
                └───────────────────────────────┼──────────────────────────────┘
                                                ▼  HTTPS · JSON · Sanctum tokens
                                  ┌──────────────────────────┐        ┌──────────────────────────┐
                                  │ api.loveatfirstfight.com │        │  (future) Flutter app    │
                                  │ ──────────────────────── │ ◀───── │  consumes the same API,  │
                                  │  Laravel — JSON API only │        │  no re-architecture      │
                                  │  /api/v1 · OpenAPI spec  │        └──────────────────────────┘
                                  └────────────┬─────────────┘
                                               ▼
                          ┌──────────────┐  ┌─────────────┐  ┌──────────────────┐
                          │ MySQL/Postgres│ │ Payment PSP │  │ Email / CRM      │
                          │  (owned data) │  │ (Stripe/    │  │ (ActiveCampaign) │
                          └──────────────┘  │  PayPal)    │  └──────────────────┘
                                            └─────────────┘
```

## Domains

| Domain | Stack | Surface | Auth | SEO |
|---|---|---|---|---|
| `www.loveatfirstfight.com` | **Nuxt** (Vue SSR) | Public marketing & funnel | Mostly anonymous | **Yes** (SSR) |
| `app.loveatfirstfight.com` | **Vue 3 SPA** | Customer / member | Sanctum token | No (behind login) |
| `admin.loveatfirstfight.com` | **Vue 3 SPA** | Staff / admin | Sanctum token (staff role) | No |
| `ops.loveatfirstfight.com` | **Vue 3 SPA** | Staff procedures / SOPs (Bruce's "place for all procedures") | Sanctum token (staff role) | No |
| `api.loveatfirstfight.com` | **Laravel** | JSON API for all clients | issues/validates tokens | n/a |

> The future **Flutter app** is another client of the *same* `api.` host — no new
> backend, no Inertia to unwind. That's the whole point of API-first.

> 🟢 **`ops.` added 2026-06-23 (Berner).** A staff-facing home for all of LAFF's
> procedures/SOPs (a requirement from Bruce). **Built as its own Vue 3 SPA** on
> `ops.` (same pattern as `app.`/`admin.`: behind login, no SEO, consumes the
> same API) — rejected `wiki.` as too generic and rejected an off-the-shelf wiki
> tool in favour of owning it. It's a fourth front-end origin for **CORS** and
> belongs in `SANCTUM` staff-role scope. Content scope (which SOPs, authoring
> flow) still being fleshed out. The ASCII diagram above still shows the original
> four; redraw to include `ops.` as a fifth front-end. See decision log.

## What this topology forces us to get right

### 1. Auth across subdomains (Sanctum)
- Use **Sanctum token-based auth** (Bearer tokens), not cookie/session SPA mode.
  Reason: tokens work identically for the two SPAs *and* the future Flutter app;
  no shared-cookie-domain gymnastics.
- (If we ever wanted cookie SPA mode instead, all app domains must sit under the
  same registrable domain — they do — and `SANCTUM_STATEFUL_DOMAINS` +
  `SESSION_DOMAIN=.loveatfirstfight.com` would be set. **Not our chosen path**,
  but noted because it's a common fork.)

### 2. CORS (Laravel `config/cors.php`)
`api.` must allow requests from the three front-end origins:
```
allowed_origins = [
  'https://www.loveatfirstfight.com',
  'https://app.loveatfirstfight.com',
  'https://admin.loveatfirstfight.com',
  'https://ops.loveatfirstfight.com',
]
```
Plus the local dev equivalents (e.g. `http://localhost:3000`, `:5173`, `:5174`).

### 3. Nuxt does SSR → server-to-server API calls
The Nuxt site renders on a server, so it calls `api.` from the **server side** for
public data (course catalog, marketing content). Plan a read path / public
endpoints that don't require a user token (cacheable, rate-limited).

### 4. Environments
Each domain gets `dev` / `staging` / `prod`. Suggested pattern:
`api.staging.loveatfirstfight.com`, `app.staging.…`, etc. (or a separate
staging registrable domain). Decide once; keep it consistent.

**🟢 Dev environment (decided 2026-06-23):** runs in **Docker on Berner's PC**
behind the existing **shared Traefik v3.6** (`D:\Development\traefik\`). Dev hosts
are `dev.{api,app,admin,ops,www}.loveatfirstfight.com`. Each service joins the
external `traefik-network` and routes via **docker labels** with
`tls.certresolver=letsencrypt` (HTTP-01) — the same pattern as the other dev
stacks on this box (SuperMatch, cartli, ebenware). **Requires public A records →
`156.155.180.202`** for ACME to validate (the public IP hairpins back to the PC).
See the decision log entry "Dev environment = local Docker on existing shared
Traefik".

### 5. TLS / DNS
Four A/CNAME records + wildcard or per-host TLS (`*.loveatfirstfight.com`
wildcard cert is simplest). The `.co.za` legacy domains redirect to these later.

## Repo shape (suggested)
Either a monorepo or four repos:
```
laff-api/        Laravel       → api.loveatfirstfight.com
laff-web/        Nuxt          → www.loveatfirstfight.com
laff-app/        Vue SPA       → app.loveatfirstfight.com
laff-admin/      Vue SPA       → admin.loveatfirstfight.com
(laff-shared/    TS types / OpenAPI-generated client, shared by web+app+admin)
```
A `laff-shared` package generated from the OpenAPI spec gives all three JS
clients **typed, always-in-sync** API calls. Open question: monorepo vs multi-repo.