Website (swapps-client)¶
The Website is the public-facing Swapps site served at swapps.com.
It is a server-side rendered (SSR) React application that runs entirely on
Cloudflare Workers at the edge.
What it is¶
swapps-client is the bilingual (English / Spanish) corporate website for Swapps:
home, services, case studies, about us, the blog, the support center, the style
guide, and the lead-generation surveys under Get Swapps. It renders every
page on the server for SEO and fast first paint, then hydrates React on the
client for interactivity.
Stack¶
| Layer | Technology |
|---|---|
| UI framework | React 19 |
| SSR meta-framework | Vike (vike-react) — file-based routing |
| Build tool | Vite 7 (client bundle) + esbuild (Worker bundle) |
| Language | TypeScript |
| Styling | SCSS with the BEM methodology |
| Runtime / deploy target | Cloudflare Workers (Static Assets + Service Bindings) |
| Error tracking | Sentry (proxied through a Worker tunnel) |
| Analytics | Google Tag Manager + Cloudflare Web Analytics |
Role in the platform¶
The Website is the only component a visitor talks to on swapps.com. Behind the
edge it composes three other services:
- Platform (
swapps-worker) — reached through a Service Binding (API_WORKER), Worker-to-Worker without leaving Cloudflare. Used for blog content (Platform proxies the WordPress REST API), lead submission, support, and chat. - App (
app.swapps.com) — reached via plainfetchtoSUBSCRIPTIONS_API_URL. Used for subscription plans and checkout sessions. - AI (
swapps-ai) — reached viafetchto/api/ai/*on the same origin. Used for plan recommendations and AI-assisted refinement.
DNS · WAF · TLS · cache · routes] CF -->|swapps.com/*| Web[Website
swapps-client Worker SSR] Web -->|Service Binding API_WORKER| Platform[Platform
swapps-worker] Web -->|fetch SUBSCRIPTIONS_API_URL| App[App
app.swapps.com] Web -->|fetch /api/ai/*| AI[AI
swapps-ai Worker] Platform -->|WP REST API| WP[WordPress / Pantheon]
Note
The Website never calls WordPress directly. Blog content flows Website → Platform → WordPress REST API. See Blog system.
Quick navigation¶
- Getting started
- Quick start — clone, install, run locally.
- Environment setup — environment variables and Wrangler config.
- Architecture
- Overview — high-level architecture.
- Cloudflare Workers — edge runtime and routing.
- Service bindings —
API_WORKERand the HTTP fallback. - SSR with Vike — rendering pipeline and routing.
- Development
- Project structure — the real file tree.
- Build and styling — build pipeline and SCSS/BEM.
- Features
- Blog system — blog flow and multilingual rendering.
- Lead generation — surveys and contact forms.
- Deployment —
wrangler deploy, previews, and CI.