1 min read

Using Edge Config with an integration

Learn how to use Edge Config with popular A/B testing and feature flag service integrations.
Table of Contents

Edge Config integrations are available on all plans

Vercel has partnered with A/B testing and feature flag services such as LaunchDarkly and Statsig to make it easier to integrate Edge Config into your workflow. These integrations sync feature flag definitions into Edge Config, allowing you to use your preferred service's SDK in your app to fetch the feature flag values at drastically lower latency.

To see these integrations in action, explore a template below. Otherwise, read on to learn how to configure an Edge Config integration yourself.

LaunchDarkly allows you to enable and disable feature flags dynamically, decoupling feature rollouts from deployments.

The LaunchDarkly Edge Config integration enables you to evaluate flags at the edge without making network calls to LaunchDarkly.

The LaunchDarkly Edge Config integration is only available to Enterprise LaunchDarkly customers. However, you do not need to have a Vercel Enterprise account.

The following steps will walk you through configuring the integration and using it to check the values of feature flags from your frontend code.

Visit the LaunchDarkly page in the Integration Marketplace and select the Add Integration button. From the Integration dialog:

  1. Select a Vercel team and project to connect the integration to
  2. Log into LaunchDarkly
  3. Select the Authorize button to allow the integration to access your LaunchDarkly account data
  4. Name the integration, and select an existing Edge Config or create a new one

To use the integration, you'll need your client-side ID from LaunchDarkly. Here's how to add it to your project:

  1. Go to the settings page of your LaunchDarkly dashboard.
  2. Select the LaunchDarkly project your integration is connected to
  3. On the next page, copy the Client-side ID under the environment your integration is connected to (for example, Test or Production)

Now, you must add the value to your project as an Environment Variable:

  1. Navigate to your Vercel dashboard and select the project you want to use LaunchDarkly with
  2. Under the Settings tab, navigate to Environment Variables, and create an LD_CLIENT_SIDE_ID variable with the value of your client-side ID

See our Environment Variables docs to learn more.

Open your project's code on your local machine and do the following:

  1. Install LaunchDarkly's Vercel Server SDK:

    pnpm
    yarn
    npm
    pnpm i @launchdarkly/vercel-server-sdk
  2. Use Vercel CLI to pull your Vercel project's environment variables:

    vercel env pull .env.development.local
  3. Finally, create a middleware.ts file at the root of your project. This file will configure Edge Middleware that redirects your site visitors from /homepage to /new-homepage based on a feature flag fetched from LaunchDarkly:

    middleware.ts
    import { init } from '@launchdarkly/vercel-server-sdk';
    import { createClient } from '@vercel/edge-config';
     
    const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
    const launchDarklyClient = init('YOUR CLIENT-SIDE ID', edgeConfigClient);
     
    export const config = {
      // Only run the middleware on the dashboard route
      matcher: '/homepage',
    };
     
    export default function middleware(request: Request): Response {
      await launchDarklyClient.initFromServerIfNeeded();
      const launchDarklyContext = { kind: 'org', key: 'my-org-key' };
      const showExperimentalHomepage = await launchDarklyClient.variation(
        'experimental-homepage',
        launchDarklyContext,
        true,
      );
     
      if (showExperimentalHomepage) {
        const url = new URL(request.url);
        url.pathname = '/new-homepage';
        return Response.redirect(url);
      }
    }

Statsig is a stats engine that enables you to automate A/B testing and make data-driven decisions at scale.

The Statsig integration enables you to directly push Statsig Configs to Vercel's Edge Config, allowing you to dynamically control the behavior of your application by replacing hard-coded values in your application with dynamic values on the server.

The following steps will walk you through configuring the integration and using it to manage Statsig experiments from your frontend code.

Visit the Statsig page in the Integration Marketplace and select the Add Integration button. Then:

  1. Select a Vercel team and Vercel project for your integration to be applied to
  2. Log into Statsig
  3. Select or create a new Edge Config to connect to Statsig
  4. Statsig will provide you with a Connection String and Edge Config Item Key. Save both, as you'll need them later in the setup

Navigate to your Vercel dashboard, and select the project you want to use the Statsig integration with.

Under the Settings tab, navigate to Environment Variables, and add the following variables:

  1. EDGE_CONFIG: Set this to the value of your Connection String
  2. EDGE_CONFIG_ITEM_KEY: Set this to the value of your Edge Config Item Key

See our Environment Variables documentation to learn more.

Statsig's statsig-node-vercel package offers an EdgeConfigDataAdapter class, which you can use to initialize Statsig experiments with Edge Config.

The following example sets up a Statsig experiment with Edge Config in an Edge Middleware file, using the EDGE_CONFIG_ITEM_KEY enviroment variable.

middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import Statsig from 'statsig-node';
import { createClient } from '@vercel/edge-config';
import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
 
export const config = {
  matcher: '/',
};
 
const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
const dataAdapter = new EdgeConfigDataAdapter({
  edgeConfigClient: edgeConfigClient,
  edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
});
 
export async function middleware(request: NextRequest) {
  await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
 
  const experiment = await Statsig.getExperiment(
    { userID: 'exampleId' },
    'statsig_example_experiment',
  );
 
  // Do any other experiment actions here
 
  return NextResponse.next();
}

Hypertune is a feature flag, A/B testing and app configuration platform with full type-safety and Git version control.

The Hypertune Edge Config integration enables you to access your feature flags and run A/B tests at ultra low latency at the edge.

The following steps will walk you through configuring the integration in an existing project. If you don't have a project, try deploying our Hypertune template.

If you do not already have a Hypertune project setup, follow the steps outlined in the Hypertune getting started guide before continuing with the steps below.

Visit the Hypertune page in the Integration Marketplace and select the Add Integration button. Then:

  1. Select a Vercel team and project
  2. Continue and log into Hypertune
  3. Connect your Hypertune project to an existing or new Edge Config store. Save the Hypertune Token, Connection String and Item Key for later
  4. Go to your Vercel dashboard and select the project you want to use the Hypertune integration with. Go to Settings > Environment Variables and add the following:
    • NEXT_PUBLIC_HYPERTUNE_TOKEN, set to the Hypertune Token
    • EDGE_CONFIG, set to the Connection String
    • EDGE_CONFIG_HYPERTUNE_ITEM_KEY, set to the Item Key

First, install the Edge Config package:

pnpm
yarn
npm
pnpm i @vercel/edge-config

Then, pull your environment variables:

vercel env pull

Now, create a hypertune.ts file that initializes the Hypertune SDK.

The following example passes an Edge Config client, your Hypertune Token, and your Edge Config Item Key to the Hypertune SDK:

lib/hypertune.ts
import { initializeHypertune } from '../generated/generated';
import { createClient } from '@vercel/edge-config';
 
const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
 
const hypertune = initializeHypertune(
  {},
  {
    token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN,
    vercelEdgeConfigClient: edgeConfigClient,
    vercelEdgeConfigItemKey: process.env.EDGE_CONFIG_HYPERTUNE_ITEM_KEY,
  },
);
 
export default hypertune;

Finally, you can use the hypertune object you exported in the file above to check for feature flags in your Edge Middleware:

middlware.ts
import { NextFetchEvent, NextRequest } from 'next/server';
import hypertune from './lib/hypertune';
 
export const config = {
  matcher: '/',
};
 
export async function middleware(
  request: NextRequest,
  context: NextFetchEvent,
) {
  await hypertune.initFromServerIfNeeded();
  const rootNode = hypertune.root({
    context: {
      user: { id: 'test', name: 'Test', email: 'test@test.com' },
    },
  });
  const exampleFlag = rootNode.exampleFlag().get(/* fallback */ false);
  console.log('Middleware feature flag: ', exampleFlag);
}
Last updated on April 16, 2024