Skip to content

Frontend Deployment

The frontend (backoffice tools, simulators) is served by the same pod as the API but exposed on a separate domain via its own nginx ingress.

Domains

Environment Frontend API
Local commerce.docker/app commerce.docker/{channel}/
Dev commerce.dev.fftrader.cz/app kong.dev.fftrader.cz/capi/
Dev (dynamic) {id}.commerce.dev.fftrader.cz/app kong.dev.fftrader.cz/capi-dynamic-{id}/
Stage commerce.stage.fftrader.cz/app kong.stage.fftrader.cz/capi/
Production commerce.fftrader.cz/app gw2.ftmo.com/capi/

Path Separation

The frontend and API ingresses are strictly separated:

  • Frontend ingress (nginx class) only exposes /app, /build, /
  • API ingress (kong class) only exposes /capi/*, /capi-public/*

API routes are not reachable on the frontend domain and vice versa.

How It Works

Same nginx + php-fpm pod, two ingresses:

  • Kong ingress handles API traffic with token validation, IP restriction, rate limiting, CORS
  • Nginx ingress handles frontend traffic with IP restriction (whitelist-source-range), serves the SPA and static assets

The frontend uses Vite + SolidJS with Symfony Twig as the HTML shell. The SolidJS router base is /app, so all frontend routes live under /app/*. The root / redirects to /app.

IP Restriction

The frontend is not public. Access is restricted to office/VPN IPs via nginx.ingress.kubernetes.io/whitelist-source-range. The allowed IPs are defined once per environment at the top of each helm values file using YAML anchors (allowedIPs for Kong, allowedIPsCSV for nginx).

Reference: https://docs.fftrader.cz/Cloud-Platform/developers/security/whitelist-office-and-vpn/

CORS

The Kong CORS plugin allows cross-origin requests from the frontend domain to the API. Origins are configured per environment in the helm values. Dynamic deploy subdomains use PCRE regex (e.g. https://.*\.commerce\.dev\.fftrader\.cz).

Testing with Playwright (Claude CLI)

The Playwright MCP plugin is configured for this project. To use it in Claude CLI:

claude mcp add playwright -- npx -y @playwright/mcp --headless

This gives Claude tools to navigate URLs, read console errors, inspect network requests, take screenshots, and interact with the page. Useful for verifying deployed frontends without leaving the terminal.

If Chrome is already running and Playwright fails to launch, close Chrome or delete the stale profile cache:

rm -rf ~/Library/Caches/ms-playwright/mcp-chrome-*