No results for ""
EXPAND ALL
  • Home
  • API docs

GIVE DOCS FEEDBACK

Vercel SDK reference

Read time: 4 minutes
Last edited: Feb 26, 2024

Overview

This topic documents how to get started with the Vercel SDK, and links to reference information on all of the supported features.

SDK quick links

LaunchDarkly's SDKs are open source. In addition to this reference guide, we provide source, API reference documentation, and a sample application:

ResourceLocation
SDK API documentationSDK API docs
GitHub repositoryLaunchDarkly Vercel SDK

The Vercel SDK is designed to be used with one of the LaunchDarkly client-side SDKs as follows:

  • The Vercel SDK gets all flags at the edge for a given context, and bootstraps them onto a cached payload
  • The client-side SDK initializes the bootstrapped payload
  • The client-side SDK evaluates the flags and sends events back to LaunchDarkly

If you are using Vercel SDK version 1.2.0 or later, then the Vercel SDK can send events back to LaunchDarkly directly. Using a client-side SDK is not necessary. You do need to configure the SDK to enable sending events. To learn more, read Configuration.

This SDK requires LaunchDarkly's Vercel integration

Configure the Vercel integration to use this SDK successfully. To learn more, read Vercel.

The Vercel integration is available to customers on an Enterprise plan. To learn more, read about our pricing. To upgrade your plan, contact Sales.

Getting started

To install and configure the Vercel SDK in an existing project:

After you complete the Creating a Vercel integration process, follow these instructions to start using the LaunchDarkly Vercel SDK.

First, install the Vercel SDK as a dependency in your application using your application's dependency manager.

Here's how:

yarn add @launchdarkly/vercel-server-sdk

Next, import the LaunchDarkly client in your application code:

import { init } from '@launchdarkly/vercel-server-sdk'
import { createClient } from '@vercel/edge-config'
The Vercel SDK uses a client-side ID

The Vercel SDK uses a client-side ID to associate the LaunchDarkly environment with the CDN integration. Your environment's client-side ID is available in the Projects tab of your Account settings page. To learn more about key types, read Keys.

After you install and import the SDK, create an edge client using your Edge Config ID. Then, initialize an LDClient using your LaunchDarkly client-side ID and this edge client.

Here's how:

const edgeConfigClient = createClient(process.env.EDGE_CONFIG)
const ldClient = init('<client-side-id-123abc>', edgeConfigClient)
await ldClient.waitForInitialization()

If you are using the Vercel SDK version 1.2.0 or later, you can optionally configure sending events during initialization. This enables Experimentation use cases. To learn more, read Experimentation events.

Here's how:

const ldClient = init('<client-side-id-123abc>', edgeConfigClient, { sendEvents: true });
await ldClient.waitForInitialization();

After you initialize the client, wait for the waitForInitialization function to resolve. When waitForInitialization is resolved, the client can serve feature flags.

Using the client, you can check which variation a particular context will receive for a given feature flag. In your Vercel Edge application, place the client.variation code so that it is invoked as needed.

Here is an example:

const ldContext = {
kind: 'org',
key: 'org-key-123abc',
someAttribute: 'example-attribute-value',
}
const flagValue = await ldClient.variation('flag-key-123abc', ldContext, true)

Bootstrapping flags with Next.js

If you are using Next.js with Vercel, you can bootstrap feature flags on the Root Layout for use in the LaunchDarkly React Web SDK. To bootstrap flags, specify the root layout's runtime with a value of edge and pass the flags to a client component that initializes the LaunchDarkly React SDK.

The Vercel SDK's GitHub repository contains an example application that takes advantage of bootstrapping flags from the edge for use in the LaunchDarkly React Web SDK.

Promises and async

All asynchronous SDK methods that return a Promise are compatible with then/catch or async/await. You can use either.

Shut down the client

If you send events, you must flush those events before your worker exits to ensure that they are sent back to LaunchDarkly. To learn more, read Flushing events.

Shut down the client when your application terminates. To learn more, read Shutting down.

Supported features