Setup LaunchDarkly

Squide integrates with LaunchDarkly to attach feature flags to the FireflyRuntime instance and automatically update deferred registrations whenever a flag value changes.

Initialize the client

To setup LaunchDarkly, first refer to the create an host application guide as a starting point and update the host application bootstrapping code to create and initialize a LaunchDarkly SDK client instance:

import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { initialize as initializeLaunchDarkly } from "launchdarkly-js-client-sdk";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";
import { registerHost } from "./register.tsx";

const launchDarklyClient = initializeLaunchDarkly("123", {
    kind: "user",
    anonymous: true
}, {
    // It's important to use the stream mode to receive feature flags
    // updates in real time.
    streaming: true
});

try {
    // Always initialize the client before forwarding the instance to the "initializeFirefly" function.
    await launchDarklyClient.waitForInitialization(5);
} catch (error: unknown) {
    // Failed to initialize LaunchDarkly...
}

const runtime = initializeFirefly({
    localModules: [registerHost],
    launchDarklyClient
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

To receive real-time feature flag updates, initialize the LaunchDarkly client with streaming enabled. When a flag value changes, Squide automatically updates deferred registrations, keeping conditional navigation items in sync with the feature flags.

initializeFirefly expects the LaunchDarkly SDK client to be initialized before it's called.

Add feature flags

Next, follow the use feature flags essential page to add feature flags to your application.

Try it 🚀

Start the application in a development environment using the dev script, then navigate to a page that uses a feature flag. In LaunchDarkly, toggle the flag value. The page should update and reflect the new value each time the flag is toggled.

Troubleshoot issues

If you are experiencing issues with this guide:

Open the DevTools console. You'll see a log entry everytime a feature flag is updated, along with console outputs from LaunchDarkly SDK client.
- [LaunchDarkly] LaunchDarkly client initialized
- [LaunchDarkly] Opening stream connection to:
- [squide] Dispatching event "squide-feature-flags-updated"
- [squide] Feature flags has been updated to:
Refer to a working example on GitHub.
Refer to the troubleshooting page.