Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions edge-middleware/feature-flag-launchdarkly/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
name: LaunchDarkly Integration example
slug: feature-flag-launchdarkly
description: Learn how to set up the LaunchDarkly integration to read flags from Edge Config
description: Learn how to set up the LaunchDarkly integration to read flags from Global Config
framework: Next.js
useCase: Edge Middleware
css: Tailwind
Expand All @@ -18,15 +18,15 @@ This example shows how to use the native [LaunchDarkly integration](https://verc

The integration provides the `NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_SIDE_ID` environment variable, which contains your client-side ID from LaunchDarkly.

LaunchDarkly syncs your feature flags into an Edge Config. When installing the LaunchDarkly integration from the Vercel Marketplace, turn on the **Enable Edge Config Syncing** toggle in the "Configuration and Plan" step of the install process. This provisions an Edge Config and exposes its connection string as the `EXPERIMENTATION_CONFIG` environment variable, which this example reads to create the Edge Config client.
LaunchDarkly syncs your feature flags into a Global Config. When installing the LaunchDarkly integration from the Vercel Marketplace, turn on the **Enable Global Config Syncing** toggle in the "Configuration and Plan" step of the install process. This provisions a Global Config and exposes its connection string as the `EXPERIMENTATION_CONFIG` environment variable, which this example reads to create the Global Config client.

## Set up the feature flag

Head over to the [LaunchDarkly Console](https://app.launchdarkly.com) and create the feature flag used by this example, in the same project and environment your client-side ID belongs to:

- `My Flag` (type boolean) with the key `my-flag` and the variations `true` and `false`

Turn the flag ON. Toggling targeting on and off changes what the page shows, confirming flags are being read from Edge Config.
Turn the flag ON. Toggling targeting on and off changes what the page shows, confirming flags are being read from Global Config.

The example evaluates the flag against a context of kind `org` with the key `my-org-key` (see `app/page.tsx`). Contexts do not need to be created in LaunchDarkly ahead of time — they are simply sent by the app at evaluation time. The default targeting rule works without any extra setup. If you want to add targeting rules, target the `org` context kind rather than `user`.

Expand Down
16 changes: 8 additions & 8 deletions edge-middleware/feature-flag-launchdarkly/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Text, Page, Link } from '@vercel/examples-ui'
import { type LDClient, init } from '@launchdarkly/vercel-server-sdk'
import { createClient } from '@vercel/edge-config'
import { createClient } from '@vercel/global-config'
import { cache } from 'react'

export const metadata = {
title: 'Vercel x LaunchDarkly example',
description:
'An example showing how to use LaunchDarkly and Vercel. This example builds on top of the LaunchDarkly integration which syncs LaunchDarkly flags into Edge Config, so you can read them from your application near-instantly.',
'An example showing how to use LaunchDarkly and Vercel. This example builds on top of the LaunchDarkly integration which syncs LaunchDarkly flags into Global Config, so you can read them from your application near-instantly.',
}
export const runtime = 'edge'

Expand Down Expand Up @@ -34,10 +34,10 @@ export const dynamic = 'force-dynamic'
// - "cache" does not work in Edge Middleware, so you'd need to create a fresh
// instance of the LaunchDarkly client for every request.
const getLdClient = cache(async (): Promise<LDClient> => {
const edgeConfigClient = createClient(process.env.EXPERIMENTATION_CONFIG)
const globalConfigClient = createClient(process.env.EXPERIMENTATION_CONFIG)
const ldClient = init(
process.env.NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_SIDE_ID!,
edgeConfigClient
globalConfigClient
)
await ldClient.waitForInitialization()
return ldClient
Expand Down Expand Up @@ -68,7 +68,7 @@ export default async function Home() {
>
LaunchDarkly integration
</Link>{' '}
with Edge Config.
with Global Config.
</Text>
</section>

Expand All @@ -80,9 +80,9 @@ export default async function Home() {
<code>{duration === 0 ? `<1` : duration}ms</code>.
</p>
<Text>
The feature flag above is loaded from Edge Config. The LaunchDarkly
integration syncs all LaunchDarkly flags into Edge Config so they can
be read from your application near-instantly.
The feature flag above is loaded from Global Config. The LaunchDarkly
integration syncs all LaunchDarkly flags into Global Config so they
can be read from your application near-instantly.
</Text>
<Text>
Read more about this in our{' '}
Expand Down
4 changes: 2 additions & 2 deletions edge-middleware/feature-flag-launchdarkly/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"lint": "next lint"
},
"dependencies": {
"@launchdarkly/vercel-server-sdk": "^1.3.3",
"@vercel/edge-config": "^1.1.0",
"@launchdarkly/vercel-server-sdk": "^1.3.53",
"@vercel/examples-ui": "^2.0.4",
"@vercel/global-config": "^1.5.0",
"next": "^16.2.0",
"react": "^19.2.1",
"react-dom": "^19.2.1"
Expand Down
94 changes: 50 additions & 44 deletions edge-middleware/feature-flag-launchdarkly/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.