Using Global Config with LaunchDarkly

This guide will help you get started with using Vercel's LaunchDarkly integration with Global Config. This integration allows you to use Global Config as a configuration source for your LaunchDarkly feature flags.

LaunchDarkly allows you to enable and disable feature flags dynamically, decoupling feature rollouts from deployments. The LaunchDarkly Global Config integration enables you to evaluate flags in the region closest to the user without making network calls to LaunchDarkly.

Before using this integration, you should have:

1. The latest version of Vercel CLI. To check your version, use vercel --version. To install or update Vercel CLI, use:
   pnpmyarnnpmbun

   Terminal

   pnpm i -g vercel@latest

   Terminal

   yarn global add vercel@latest

   Terminal

   npm i -g vercel@latest

   Terminal

   bun add -g vercel@latest

2. A project. If you don't have one, you can run the following terminal commands to create a Next project:

pnpm create next-app@latest 

yarn create next-app@latest 

npx create-next-app@latest 

bunx create-next-app@latest 

1. A Vercel project. If you don't have one, see Creating a Project
2. A Global Config. If you don't have one, follow the Global Config quickstart
3. The Global Config SDK:
   pnpmyarnnpmbun

   Terminal

   pnpm i @vercel/global-config

   Terminal

   yarn add @vercel/global-config

   Terminal

   npm i @vercel/global-config

   Terminal

   bun add @vercel/global-config

1. Set up the LaunchDarkly 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 Global Config or create a new one

2. Get your client-side ID

   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.

3. Use the LaunchDarkly integration in your code

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

   1. Install LaunchDarkly's Vercel Server SDK:
   pnpmyarnnpmbun

   Terminal

   pnpm i @launchdarkly/vercel-server-sdk

   Terminal

   yarn add @launchdarkly/vercel-server-sdk

   Terminal

   npm i @launchdarkly/vercel-server-sdk

   Terminal

   bun add @launchdarkly/vercel-server-sdk

   2. Use Vercel CLI to pull your Vercel project's environment variables:

      vercel env pull

   3. Finally, create a middleware.ts file at the root of your project. This file will configure a 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/global-config';
       
      const globalConfigClient = createClient(process.env.GLOBAL_CONFIG!);
      const launchDarklyClient = init(
        process.env.LD_CLIENT_SIDE_ID!,
        globalConfigClient,
      );
       
      export const config = {
        // Only run the middleware on the /homepage route
        matcher: '/homepage',
      };
       
      export default async function middleware(
        request: Request,
      ): Promise<Response | undefined> {
        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);
        }
      }

      middleware.js

      import { init } from '@launchdarkly/vercel-server-sdk'
      import { createClient } from '@vercel/global-config'
       
      const globalConfigClient = createClient(process.env.GLOBAL_CONFIG);
      const launchDarklyClient = init(
        process.env.LD_CLIENT_SIDE_ID,
        globalConfigClient,
      );
       
      export const config = {
        // Only run the middleware on the /homepage route
        matcher: '/homepage',
      };
       
      export default async function middleware(request) {
        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);
        }
      }

Now that you have set up the LaunchDarkly Global Config integration, you can explore the following topics to learn more:

• Get started with Global Config
• Read with the SDK
• Use the dashboard
• Global Config limits