Flags Explorer
We'll now simulate adding a new feature to production without releasing it yet.
First, we'll hard code the feature flag to always be off. Then we'll use Flags Explorer to override this feature flag for ourselves so we can test in production before releasing the feature to everyone.
First, we turn the feature flag off for everyone.
import { flag } from "flags/next";
export const enableSummerSale = flag<boolean>({
key: "summer-sale",
description: "Shows a bright yellow banner for a 20% discount",
defaultValue: false,
decide() {
return false;
},
});Next, we'll enable Flags Explorer by creating the Flag Discovery Endpoint.
import { getProviderData, createFlagsDiscoveryEndpoint } from 'flags/next';
import * as flags from '../../../../flags';
export const GET = createFlagsDiscoveryEndpoint(async (request) => {
const providerData = await getProviderData(flags);
return providerData;
});Open the Flags Explorer in the Vercel Toolbar.
You should see the feature flag we created.
Override the summer-sale flag to be on and click 'Apply'.
The Flags SDK will automatically respect overrides set by Flags Explorer.
Flags Explorer can be used with any flag provider and does not require using the Flags SDK.
Hard-coded values
- perfect availability
- instant evaluation
- change history in code
- no way to change the value without deploying
- changing a value does not affect other deployments (eg previews) unless they rebase
Flags Explorer
- safe releases: can test in production before releasing the feature
- short-lived branches: can merge to main without releasing the feature
- end-to-end testing: tests can override flags so both cases are tested