Skip to main content

Creating your first feature flag

This 10 minute guide will walk through creating your first feature flag in Eppo. In the example, we'll imagine that we are adding a basic on/off switch for a new onboarding page.

While Eppo's SDK can be used for targeted rollouts, A/B/n experiments, and personalization via Contextual Bandits, this guide will focus on creating a simple on/off switch in Eppo.

Generate an SDK key

From the Configuration section, navigate to the SDK keys tab. Here you can generate keys for both production and testing.

Setup Eppo SDK key

For now, create a Test environment SDK key by clicking Create >> SDK Key. Give the key a name and select Test for the Environment. Each SDK key will be tied to a specific environment. This allows you to toggle a flag's status is each of your development environments independently.

Store the SDK key securely; it is not possible to view it after closing the modal. However, generating a new key is easy in case you do lose it.

Configure the flag in Eppo's UI

Create a flag

Start by creating a flag for the new feature:

Feature gate 0

Give the flag a descriptive human readable name and create variations for each version of the feature. In this example we only have two states: enabled and disabled. If your flag is more involved, you can change the flag type to be string, numeric, or JSON-valued. Read more about flag types here.

Feature gate 1

Create a Feature Gate allocation

After creating the flag, you'll see a page where you can define how variants should be allocated in each environment. Make sure you are in the Test environment, and click Add Allocation >> Feature Gate.

Note that if you wanted to instead turn the feature flag on for a random set of users, you would follow this same process, but select Experiment instead of Feature Gate.

Feature gate 3

For this example, we will assign all users to the Enabled version of the flag. If you want to target specific users, you can add targeting rules to the allocation. You can read more about targeting here.

Feature gate 4

Integrate the SDK

Now that we have created a flag and an allocation, we can start getting variations from the SDK. This section walks through basic integration for a few common frameworks, for a full list of SDKs and integration options, see the SDKs section of the docs.

Install the SDK

note

The JavaScript SDK is intended for use in browser applications. For server-side applications, use the Node SDK.

yarn add @eppo/js-client-sdk

You can also install the SDK with NPM or via a script tag. For more information, see the JavaScript SDK documentation.

Initialize the SDK

Now that you've installed the appropriate Eppo SDK, you'll need to initialize the SDK in your application. Once initialized, you can create an Eppo client and assign flag variations in your application, all without any additional network requests.

import { init } from "@eppo/js-client-sdk";

await init({
apiKey: '<SDK_KEY>'
});

If you are using React, we have some React specific recommendations.

Get flag variations

Once the SDK is initialized, use getBooleanAssignment to check which variation a user should see:

import * as EppoSdk from "@eppo/js-client-sdk";

const eppoClient = EppoSdk.getInstance();

const variation = eppoClient.getBooleanAssignment(
"new-user-onboarding", // flag key
user.id, // subject key
{}, // userProperties
false, // default value
);

return variation ? <NewCheckoutPage /> : <OldCheckoutPage />

Note that the get<Type>Assignment methods in Eppo are deterministic, meaning that they will always return the same flag status for a given subject (e.g., user) wherever the flag is called.

Turn on the flag

Flip the flag on in the Test environment to start serving the new feature.

Feature gate 5

You should now see assignments coming through the Eppo SDK!

To deploy to production, create a new SDK key for the production environment, create a production feature gate allocation, and enable the flag.