Using Edge Config with an integration

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.waitForInitialization();
     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);
     }
   }

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.

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();
}

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 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 while configuring the SDK to listen for updates when used on the server:

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,
    shouldListenForUpdates: typeof window === 'undefined',
  },
);
 
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:

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.waitForInitialization();
  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);
}