OpenFeature Flags SDK Example

This example uses OpenFeature for feature flags with the Flags SDK and the Flags SDK OpenFeature adapter along with the Flags Explorer.

Demo

https://flags-sdk-openfeature.vercel.app/

How it works

This demo uses two feature flags defined in code control the visibility of two banners on the page. Both flags are configured to show/hide each banner 50% of the time.

Once you visit the page, you can see a variation of both/one/none of the banners. Since this example is using a stable id to identify users, you will see the same variation until you reset your id.

To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page. This allows you to test different variations of the banners.

If you deployed your own instance of this example you can also use the Flags Explorer to test different variations by creating overrides.

Deploy this template

Step 1: Link the project

First, install the latest version of the Vercel CLI:

1
pnpm i -g vercel

or

1
npm i -g vercel

To use the Flags Explorer, you need to connect your local project to your Vercel project:

1
vercel link

Select the project from the list you just deployed.

Step 2: Pull all environment variables

This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata.

1
vercel env pull

Step 3: Install dependencies

1
pnpm install

or

1
npm install --legacy-peer-deps

Step 4: Run the project

1
pnpm run dev

or

1
npm run dev