Skip to main content

Show the LaunchDarkly tab on a component

Components get a LaunchDarkly tab: their feature flags. The card of Administration › Plugins says: Feature flags of an entity, read through the proxy.

Three steps: turn on the plugin, give it the address and the key of LaunchDarkly, annotate the component.

1. 🔌 Turn on the plugin​

  1. In Administration, under PLATFORM, click Plugins.

  2. On the LaunchDarkly card, click the switch Enable LaunchDarkly.

2. 🔧 Give the plugin the address and the key​

  1. On the LaunchDarkly card, click Configure. The Settings page of the plugin opens.

  2. Fill in the form:

    FieldWhat to enterExample
    API URLThe LaunchDarkly API root, with https://https://app.launchdarkly.com/api
    API keyThe API key LaunchDarkly expects. It stays in the backend: the browser never talks to LaunchDarkly.

  3. Click Save. The message Settings saved. appears at the bottom left of the screen and goes away by itself. The page says The configuration has changed.

  4. Click Reload. The instance restarts; wait a few seconds. The fields stay filled, and the API key shows as XXXXXXXXXXXX.

3. 🏷️ Annotate the component​

In the component's catalog-info.yaml, name the LaunchDarkly project:

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: shop-api
  annotations:
    launchdarkly.com/project-key: shop-api   # the project key in LaunchDarkly
spec:
  type: service
  lifecycle: production
  owner: group:default/platform-team

✅ Check​

Open the component from Catalog: the LaunchDarkly tab is after Docs. Once the settings are saved, the tab no longer says LaunchDarkly is not configured yet; it asks LaunchDarkly for the flags. What the tab shows when LaunchDarkly accepts the key was not checked on a live instance.

✅ That's it!