Growthbook Flags SDK Example

This example uses GrowthBook for feature flags with the Flags SDK along with the @flags-sdk/growthbook GrowthBook adapter and the Flags Explorer.

Demo

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

How it works

This demo controls the visibility of two banners on the home page, and the color of the checkout button.

Once you visit the page, you can see a variation of both/one/none of the banners.

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

When you create and link a project on Vercel, you may use the Flags Explorer to see what variants are active, and test different variations by creating overrides.

Deploy this template

Step 1: Link the project

In order to use the Flags Explorer, you need to link the project on your local machine.

vercel link

If your project does not exist yet, you will be prompted to create it.

Step 2: Pull all environment variables

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

vercel env pull

If you are building this on the CLI, you can set the environment variables with vercel env add

Step 3: Create Feature Gates and Experiments

On GrowthBook, create a project with the following flags split by id:

• free_delivery (50% rollout or experiment)
• summer_sale (50% rollout or experiment)
• proceed_to_checkout (Multiple variants serving red, green or blue)

The id of the flags in GrowthBook should match the key of the flags in the flags.ts file.

If you have not started your experiments yet, you must do so in order to see the traffic split.