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.
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.
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 servingred,greenorblue)
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.
