generated from nholtware/service-template-react
feat: Unleash feature flags via src/lib/flags.tsx, hello-banner on home page
Ported from service-template-react e6f8827.
This commit is contained in:
parent
444044b99a
commit
52b5a48346
12 changed files with 276 additions and 9 deletions
30
README.md
30
README.md
|
|
@ -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`.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue