Using Edge Config with LaunchDarkly

Learn how to use Edge Config with Vercel's LaunchDarkly integration.
Table of Contents

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.

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:

    pnpm
    yarn
    npm
    pnpm i -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
    yarn
    npm
    pnpm i next
    terminal
    npx create-next-app@latest
  3. A Vercel project. If you don't have one, see Creating a Project

  4. An Edge Config. If you don't have one, follow the Edge Config quickstart

  5. The Edge Config SDK:

    pnpm
    yarn
    npm
    pnpm i @vercel/edge-config

The following steps will walk you through:

  • Configuring Vercel's LaunchDarkly Edge Config integration
  • Using it to check your feature flags from your frontend code
  1. 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
  2. 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. 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);
        }
      }
Last updated on July 23, 2024