Backstage LaunchDarkly Plugin

LaunchDarkly is a feature management platform that lets you control feature rollout with flags so you can ship safely and learn faster. It helps teams release to segments, run gradual rollouts, and turn things off when needed. The Backstage integration pushes relevant flags to component pages so you can see them beside deployments and incidents.

This plugin brings LaunchDarkly data into your Backstage catalog. You can show flags on an entity page or in a project tab. It can display variations and link to the flag in LaunchDarkly. Rows expand to show environment targeting details. There is a card that summarizes environment statuses for each flag. You can filter by tag or query to focus on the flags that matter to a service. A newer annotation supports more complex filtering when you need fine control.

Common use cases include tracking a rollout across dev test and production, checking whether a flag might be influencing a service during an incident, and confirming what a change will do before you deploy. It helps reduce context switching since the flag view sits with the rest of your service data.

For engineers running a self hosted Backstage this plugin saves time. It scales to more than the default three environments per query when needed. You can tailor the columns and hide labels or descriptions to fit your team’s view.

Installation Instructions

These instructions apply to self-hosted Backstage only. To use this plugin on Roadie, visit the docs.

Install the package

Copy

yarn add --cwd packages/app @roadiehq/backstage-plugin-launchdarkly

Configure the LaunchDarkly proxy

Add this to app-config.yaml

Copy

proxy:
  '/launchdarkly/api':
    target: https://app.launchdarkly.com/api
    headers:
      Authorization: ${LAUNCHDARKLY_API_KEY}

Enable the proxy in the legacy backend

Add the proxy backend package

Copy

yarn add --cwd packages/backend @backstage/plugin-proxy-backend

Create the proxy plugin file

Copy

// packages/backend/src/plugins/proxy.ts
import { createRouter } from '@backstage/plugin-proxy-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    discovery: env.discovery,
    tokenManager: env.tokenManager,
  });
}

Mount the proxy router

Copy

// packages/backend/src/index.ts
import proxy from './plugins/proxy';

// inside the main function after creating apiRouter
const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));
apiRouter.use('/proxy', await proxy(proxyEnv));

Enable the proxy in the new backend system

Add the proxy backend package

Copy

yarn add --cwd packages/backend @backstage/plugin-proxy-backend

Copy

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';
import { proxyPlugin } from '@backstage/plugin-proxy-backend';

const backend = createBackend();

backend.add(proxyPlugin());

backend.start();

Add the LaunchDarkly UI to the entity page

Import the components

Copy

// packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityLaunchdarklyContextOverviewCard,
  isLaunchdarklyContextAvailable,
  EntityLaunchdarklyCard,
  isLaunchdarklyProjectAvailable,
  EntityLaunchdarklyProjectOverviewContent,
} from '@roadiehq/backstage-plugin-launchdarkly';

Show the context card on the overview tab

Copy

// inside overviewContent
<EntitySwitch>
  <EntitySwitch.Case if={isLaunchdarklyContextAvailable}>
    <EntityLaunchdarklyContextOverviewCard />
  </EntitySwitch.Case>
</EntitySwitch>

Show the project flags table on the overview tab

Copy

// inside overviewContent
<EntitySwitch>
  <EntitySwitch.Case if={isLaunchdarklyProjectAvailable}>
    <EntityLaunchdarklyCard envs={['production', 'dev']} />
  </EntitySwitch.Case>
</EntitySwitch>

Add a LaunchDarkly tab for project level info

Copy

// inside serviceEntityPage
<EntityLayout.Route path="/launch-darkly-projects" title="LaunchDarkly">
  <EntityLaunchdarklyProjectOverviewContent />
</EntityLayout.Route>

Annotate your entity

Add the annotations to link the entity to a LaunchDarkly project and environment. You can also filter by tags or a query.

Copy

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: launchdarklytest
  annotations:
    launchdarkly.com/project-key: default
    launchdarkly.com/environment-key: test
    launchdarkly.com/context: '{ "kind": "tenant", "key": "blah", "name": "blah" }'
    launchdarkly.com/filter-tags: '["tagged-flag"]'
    launchdarkly.com/filter-query: 'dark-mode'
spec:
  type: service
  lifecycle: unknown
  owner: group:engineering

Set the API key and run Backstage

Set the LaunchDarkly API key in the backend environment

Copy

export LAUNCHDARKLY_API_KEY=YOUR_LAUNCHDARKLY_REST_API_TOKEN

Start the backend

Copy

yarn workspace backend start

Start the frontend in another terminal

Copy

yarn workspace app start

Things to Know

Authentication

The LaunchDarkly API uses token-based authentication so in order to retrieve results you will need it. To generate an API token, go to https://docs.launchdarkly.com/home/account/api.

Changelog

This changelog is produced from commits made to the LaunchDarkly plugin since 3 months ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Features

Add new annotation for more complex LaunchDarkly filtering #2001 Merged 2 months ago
Allow retrieval of more than the API limit of three environments for LaunchDarkly. Add option to hide description or labels #1997 Merged 2 months ago
Add support for a filter annotation on the LaunchDarkly card #1993 Merged 2 months ago
Add a LaunchDarkly card that shows environment status for each feature flag #1978 Merged 2 months ago
Allow rendering of complex flags in the LaunchDarkly plugin #1949 Merged 2 months ago

Improvements

Improve the LaunchDarkly Overview card to show more info #1953 Merged 2 months ago

Bug fixes

Fix the query filter. Base the query on the context value instead of the flags API #1957 Merged 2 months ago
Fix theme rendering on the LaunchDarkly card #1955 Merged 2 months ago

Performance

Wrap column configuration in memo to prevent rerenders #1991 Merged 2 months ago
Limit unnecessary rerenders in the LaunchDarkly details panel #1989 Merged 2 months ago

Maintenance

Upgrade Backstage dependencies to version 1.40 #1952 Merged 2 months ago

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo