https://feature-flag-kameleoon.vercel.app

You can choose from one of the following two methods to use this repository:

Note: Before clicking Deploy, follow the section Set up Kameleoon to create an account, set up feature flags and obtain the Kameleoon siteCode.

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/kameleoon/vercel-starter-kit/tree/main

Note: Before running locally, follow the section Set up Kameleoon to create an account, set up feature flags and obtain the Kameleoon siteCode.

Set a KAMELEOON_SITE_CODE, KAMELEOON_CLIENT_ID, KAMELEOON_CLIENT_SECRET and EDGE_CONFIG in .env.example, you can get it from Kameleoon platform. Then, copy the .env.example file in this directory to .env.local (which will be ignored by Git). Below is the command:

cp .env.example .env.local

• KAMELEOON_SITE_CODE is the site code of your Kameleoon project found in the Kameleoon project dashboard.
• KAMELEOON_CLIENT_ID and KAMELEOON_CLIENT_SECRET are the client id and client secret of your Kameleoon account found in the profile settings.
• EDGE_CONFIG also known as connection string can be set in your Vercel storage settings by following this guide. Note: that Kameleoon integration must be enabled in your Vercel project settings.

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

You can use Kameleoon feature flags at the edge with NextJS applications deployed on Vercel. This Kameleoon Feature Flag middleware uses and extends our Kameleoon NodeJS SDK as a starting point to provide experimentation and feature flagging on the edge. For more information on how to run Feature Flags and Experiments with our platform follow the steps outlined in our documentation here.

Kameleoon edge configuration is a JSON representation of feature flags and experiments. It contains all the data needed to deliver and track your flag deliveries and experiments. By using our Kameleoon Integration, you can seamlessly bind your site's configuration to Vercel's Edge Config. Using your site code, it becomes straightforward to retrieve the client configuration from Edge Config.

What sets this approach apart is the efficiency gained from Vercel's CDN. The Edge Config from Vercel ensures rapid fetching of client configurations, capitalizing on the speed and reliability of the Vercel Content Delivery Network.

First, you will need to get a Kameleoon account.

In this section, we will create a feature flag with respected variables and variations.

1. Go to Feature flags dashboard and click on New feature flag button.
2. Give a name new_home_page, select the site and click on Validate button.
3. Go to Variables section, click on Add variable button to add a variable.
4. Name it home_page, set type to string and set default value to old_version. This default value will represent the old version of home page.
5. Save it. Button is located at the bottom right corner.
6. Go to Variations and select On default variation. In configure section, find your newly created variable and set new value to new_version. This new value represents the new version of home page.
7. Save it.

In this section, we will create a targeted rule with variation On.

1. Go to Production section, click on Add a rule and select Targeted Delivery.
2. Only change the Variation to serve to On and adjust exposition to 50%.
3. Save it
4. Lastly, enable the feature flag to apply the flag rule.