https://github.com/knagurski/ff-sdk-demo
Demo of using the FF SDK both within an app and a library
https://github.com/knagurski/ff-sdk-demo
feature-flags harness sdk-react
Last synced: 7 months ago
JSON representation
Demo of using the FF SDK both within an app and a library
- Host: GitHub
- URL: https://github.com/knagurski/ff-sdk-demo
- Owner: knagurski
- Created: 2023-10-31T17:53:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-06T10:53:15.000Z (over 2 years ago)
- Last Synced: 2025-01-03T20:29:16.568Z (over 1 year ago)
- Topics: feature-flags, harness, sdk-react
- Language: TypeScript
- Homepage: https://by-ff-sdk-demo.netlify.app/
- Size: 164 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ff-sdk-demo
Demo of using the FF SDK both within an app and a library.
> Please note, this is rough demo code. There are warnings and some issues, but the general approach should work.
## Getting started
1. clone the repo
2. in the root of the repo run `npm i`
3. when complete run `npm run dev`
4. open the URL posted in the output
## Toggling flags
When you log into the sample Harness account, you'll have 2 projects
- **BY Library** this controls the flags used within the library
- **BY App** this controls the flags used within the app
The app is set up to stream changes, so toggling a flag in either of these projects should be reflected in the app
within a second or two.
## Approach
The sample code uses Turbo for quickly being able to spin up a monorepo with both the App and UI library. This is a
great tool, but for this example, you can largely ignore it and look at `app/web` for the App and `packages/ui` for the
UI library.
Because of the way React handles context resolution, if both the App and UI library's use of the `FFContextProvider`
were in the same tree, any use of the context by either the App or the UI library would access the closest FF context up
the tree. One possible solution is to instead make the `FFContextProvider` usages siblings and use one to feed internal
state that can then be accessed by either the App or the UI library. In this example, I chose to hold the UI library's
flags in state.
The UI library itself does not use the FF SDK directly, but rather has its own context provider and hook and flags are
injected into that context by the parent app. You can see this super-simple context and hook approach
in `packages/ui/UIFF.tsx` and it's usage in a component in `packages/ui/card.tsx`.
In the App, you can see the injecting mechanism in `apps/web/src/App.tsx`. A benefit of this approach is that when unit
testing your UI library, you do not need to mock anything, but rather just wrap your component in a `FFUIProvider`
component with the flag state you want to test.