Skip to content
Merged
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 Global Config
description: Learn how to set up the LaunchDarkly integration to read flags from Edge 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 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.
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.

## 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 Global Config.
Turn the flag ON. Toggling targeting on and off changes what the page shows, confirming flags are being read from Edge 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
12 changes: 6 additions & 6 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/global-config'
import { createClient } from '@vercel/edge-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 Global 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 Edge Config, so you can read them from your application near-instantly.',
}
export const runtime = 'edge'

Expand Down Expand Up @@ -68,7 +68,7 @@ export default async function Home() {
>
LaunchDarkly integration
</Link>{' '}
with Global Config.
with Edge 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 Global Config. The LaunchDarkly
integration syncs all LaunchDarkly flags into Global Config so they
can be read from your application near-instantly.
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.
</Text>
<Text>
Read more about this in our{' '}
Expand Down
2 changes: 1 addition & 1 deletion edge-middleware/feature-flag-launchdarkly/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"dependencies": {
"@launchdarkly/vercel-server-sdk": "^1.3.3",
"@vercel/global-config": "^1.5.0",
"@vercel/edge-config": "^1.1.0",
"@vercel/examples-ui": "^2.0.4",
"next": "^16.2.0",
"react": "^19.2.1",
Expand Down
44 changes: 23 additions & 21 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.

4 changes: 2 additions & 2 deletions flags-sdk/launchdarkly/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The easiest way to get started with LaunchDarkly is through the native integrati

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fflags-sdk%2Flaunchdarkly&env=FLAGS_SECRET&envDescription=The+FLAGS_SECRET+will+be+used+by+the+Flags+Explorer+to+securely+overwrite+feature+flags.+Must+be+32+random+bytes%2C+base64-encoded.+Use+the+generated+value+or+set+your+own.&envLink=https%3A%2F%2Fvercel.com%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fsupporting-feature-flags%23flags_secret-environment-variable&project-name=launchdarkly-flags-sdk&repository-name=launchdarkly-flags-sdk&products=%5B%7B%22integrationSlug%22%3A%22launchdarkly%22%2C%22productSlug%22%3A%22launchdarkly%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experimentation%22%7D%5D)

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 LaunchDarkly syncs your flags into. The `@flags-sdk/launchdarkly` adapter (v1.0.0+) reads this variable by default.
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 LaunchDarkly syncs your flags into. The `@flags-sdk/launchdarkly` adapter (v1.0.0+) reads this variable by default.

### Step 1: Link the project

Expand Down Expand Up @@ -92,7 +92,7 @@ After that, start the Experiment.
See `.env.example` for a template.

- [`FLAGS_SECRET`](https://vercel.com/docs/feature-flags/flags-explorer/reference#flags_secret-environment-variable)
- `EXPERIMENTATION_CONFIG` (Global Config connection string, exposed by the LaunchDarkly Marketplace integration when you turn on **Enable Global Config Syncing** during install)
- `EXPERIMENTATION_CONFIG` (Edge Config connection string, exposed by the LaunchDarkly Marketplace integration when you turn on **Enable Edge Config Syncing** during install)
- `LAUNCHDARKLY_PROJECT_SLUG`
- `LAUNCHDARKLY_CLIENT_SIDE_ID`
- `NEXT_PUBLIC_LAUNCHDARKLY_CLIENT_SIDE_ID` (set to same value as `LAUNCHDARKLY_CLIENT_SIDE_ID`)
Expand Down
2 changes: 1 addition & 1 deletion flags-sdk/launchdarkly/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"@tailwindcss/postcss": "^4.0.8",
"@tailwindcss/typography": "0.5.16",
"@vercel/edge": "1.2.1",
"@vercel/global-config": "1.5.0",
"@vercel/edge-config": "1.4.3",
"@vercel/toolbar": "0.1.33",
"clsx": "2.1.1",
"flags": "^4.0.0",
Expand Down
Loading