feat: Unleash feature flags via src/lib/flags.tsx, hello-banner on home page
All checks were successful
/ checks (push) Successful in 38s
/ deploy (push) Successful in 9s

Ported from service-template-react e6f8827.
This commit is contained in:
nholtware 2026-11-05 11:19:56 -06:00
parent 444044b99a
commit 52b5a48346
12 changed files with 276 additions and 9 deletions

View file

@ -21,13 +21,35 @@ npm run format
image runs in every environment. Read values through `getConfig()` in
`src/lib/config.ts`.
| Env var | Default | Meaning |
| -------------- | ------- | ----------------------------------------------- |
| `API_BASE_URL` | `/api` | Backend base URL; `/api` is the same-host route |
| `APP_NAME` | `app` | Display name |
| Env var | Default | Meaning |
| ------------------------ | ------- | --------------------------------------------------- |
| `API_BASE_URL` | `/api` | Backend base URL; `/api` is the same-host route |
| `APP_NAME` | `app` | Display name |
| `UNLEASH_URL` | (empty) | Unleash base URL for the browser; empty = flags off |
| `UNLEASH_FRONTEND_TOKEN` | (empty) | Unleash frontend token (public by design) |
Everything in `config.js` is public. Never put secrets there.
## Feature flags
Flags come from Unleash (UI: http://unleash.192.168.1.83.nip.io, environment `development`)
through its Frontend API, using the official `@unleash/proxy-client-react` SDK.
`src/lib/flags.tsx` wraps it: `FlagsProvider` is mounted once in `main.tsx`;
components call the wrappers, never the SDK directly:
```tsx
import { useFlag, useVariant } from "../lib/flags";
const showBanner = useFlag("hello-banner");
```
- In the cluster the deployment sets `UNLEASH_URL=http://unleash.192.168.1.83.nip.io`
and `UNLEASH_FRONTEND_TOKEN` from Secret `unleash-client-token` (key `frontendToken`).
- The SDK fetches on load and refreshes every 15 s; components re-render on change.
A reload always picks up the current state.
- With `UNLEASH_URL` unset (local `npm run dev`, tests) every flag reads `false`, nothing is fetched.
- Tests: `vi.mock("@unleash/proxy-client-react")` and control `useFlag` (see `src/app.test.tsx`).
- `hello-banner` on the home page is the platform demo flag; delete it when you don't need it.
## Container
- `GIT_SHA` build arg is baked in as `import.meta.env.VITE_GIT_SHA`.