# 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.