Client-side flags
Web, native, and Sanity use the Flagsmith client-side environment key. These apps only receive flags that are not marked server-side-only in Flagsmith.
Web
The server loads flags once per page request. The browser reuses that data — it does not call Flagsmith or the API gateway on its own.
Request → Next.js server → Edge Proxy → flags sent with the page → browserEnvironment variables (server-only, not in the browser bundle):
| Variable | Azure | Local dev |
|---|---|---|
FLAGSMITH_API_URL | http://feye-flagsmith-edge-proxy-{env}-ca/api/v1 | http://localhost:8888/v2/flags (via API gateway) |
FLAGSMITH_CLIENT_ENVIRONMENT_KEY | Per-environment client key | From apps/web/.env.development |
In code:
- Server components — use the web app’s SSR helper (
@/lib/feature-flags/ssr). - Client components —
useFlag(flags.…)from@repo/feature-flags-react(root layout already wraps the app with the flags provider).
Native
The app fetches flags through the public API gateway.
| Variable | Example |
|---|---|
EXPO_PUBLIC_FLAGSMITH_API_URL | https://api.feyenoord.com/v2/flags |
EXPO_PUBLIC_FLAGSMITH_ENVIRONMENT_KEY | Client-side environment key |
Use useFlag(flags.…) after the app’s feature-flags provider is set up. If env vars are missing, the app runs without Flagsmith and uses registry defaults.
Sanity Studio
Same idea as native: client-side init in the studio, with SANITY_STUDIO_FLAGSMITH_* env vars.
Local development
Start the backend Docker Compose profile (Edge Proxy) and the API gateway. Web, native, and Sanity all need the proxy reachable — web via gateway on port 8888, see Docker Compose.
Related
- Overview
- Server-side — API and workers (different SDK)