Cloudflare Website — Edge-First Web Platform Architecture

📘 General • javascript • v1 • 2026-04-01

Architecture of the Flowork website: Vue 3 SPA with Vuetify, deployed on Cloudflare Pages. Uses Cloudflare Functions for SSR, KV for data storage, and a responsive layout system with desktop/mobile/webview variants.

The Cloudflare Website

The Flowork website serves dual purposes: it is both the public marketing site (floworkos.com) and the in-app UI loaded inside Electron.

Technology Stack

Framework: Vue 3 with Composition API
UI Library: Vuetify 3 + custom glassmorphism CSS
Build: Vite
Hosting: Cloudflare Pages
Edge Functions: Cloudflare Functions (Workers)
Storage: Cloudflare KV
State: Pinia stores

Layout System

The app detects its context and loads the appropriate layout:

GuestLayout — Public pages (landing, blog, KB, pricing)
DefaultLayout — Authenticated user pages (canvas, app store, flow designer)
WebviewLayout — When running inside Electron (detected via userAgent or URL)

Each major view has three variants:

LanderDesktop.vue — Desktop browser layout
LanderMobile.vue — Mobile responsive layout
CanvasDesktopWebview.vue — Electron-specific layout

SSR Strategy

Cloudflare Functions pre-render HTML for SEO bots. The pattern: 1. Function intercepts request (e.g., /kb/article-slug) 2. Fetches index.html from built assets to extract Vue JS/CSS references 3. Fetches content from Cloudflare KV 4. Returns complete HTML with structured data, Open Graph tags, and the Vue bootstrap script 5. Vue hydrates the page and takes over as an SPA

INDEXED KEYWORDS: