Setting up the LaunchDarkly developer toolbar

1
import { render } from 'react-dom';
2
import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
3
import { 
4
  useLaunchDarklyToolbar, 
5
  FlagOverridePlugin, 
6
  EventInterceptionPlugin 
7
} from '@launchdarkly/toolbar';
8
9
// Pass the same instance of these plugins into both the LaunchDarkly
10
// React client as well as the developer toolbar
11
const flagOverridePlugin = new FlagOverridePlugin();
12
const eventInterceptionPlugin = new EventInterceptionPlugin();
13
14
(async () => {
15
  const LDProvider = await asyncWithLDProvider({
16
    clientSideID: 'example-client-side-id',
17
    context: {
18
      kind: 'user',
19
      key: 'example-user-key',
20
      name: 'Sandy Smith',
21
      email: 'sandy@example.com',
22
    },
23
    options: {
24
      plugins: [
25
        flagOverridePlugin,
26
        eventInterceptionPlugin,
27
        // other plugins...
28
      ],
29
      // other options...
30
    },
31
  });
32
33
  function App() {
34
    // Initialize toolbar with the same plugin instances
35
    useLaunchDarklyToolbar({
36
      flagOverridePlugin, // For flag overrides (SDK Mode only)
37
      eventInterceptionPlugin, // For event monitoring (works in both modes)
38
39
      // OR Dev Server Mode: Connect to LaunchDarkly dev server
40
      devServerUrl: 'http://localhost:8080',
41
      projectKey: 'my-project', // Optional: auto-detects if not provided
42
43
      // Common options
44
      position: 'bottom-right',
45
      enabled: process.env.NODE_ENV === 'development' // disable in production/hosted environments
46
    });
47
48
    return <YourApp />;
49
  }
50
51
  render(
52
    <LDProvider>
53
      <App />
54
    </LDProvider>,
55
    document.getElementById('root'),
56
  );
57
})();

1
import { onMounted } from 'vue';
2
import * as LDClient from 'launchdarkly-js-client-sdk';
3
import { useLaunchDarklyToolbar } from '@launchdarkly/toolbar/vue';
4
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar/plugins';
5
6
const flagOverridePlugin = new FlagOverridePlugin();
7
const eventInterceptionPlugin = new EventInterceptionPlugin();
8
9
// Initialize LaunchDarkly client
10
const client = LDClient.initialize(
11
  'client-side-id-123abc',
12
  {
13
    kind: 'user',
14
    key: 'user-key-123abc',
15
    name: 'Sandy Smith',
16
    email: 'sandy@example.com',
17
  },
18
  {
19
    plugins: [flagOverridePlugin, eventInterceptionPlugin],
20
  },
21
);
22
23
// In your Vue component or setup function
24
export default {
25
  setup() {
26
    onMounted(async () => {
27
      await client.waitForInitialization();
28
    });
29
30
    // Initialize toolbar with the same plugin instances
31
    useLaunchDarklyToolbar({
32
      flagOverridePlugin,
33
      eventInterceptionPlugin,
34
35
      // OR Dev Server Mode
36
      devServerUrl: 'http://localhost:8080',
37
      projectKey: 'my-project',
38
39
      position: 'bottom-right',
40
      enabled: import.meta.env.DEV, // Vite
41
      // enabled: process.env.NODE_ENV === 'development', // Webpack
42
    });
43
44
    return {
45
      // your component data
46
    };
47
  },
48
};

1
import { Component, OnInit } from '@angular/core';
2
import * as LDClient from 'launchdarkly-js-client-sdk';
3
import LaunchDarklyToolbarService from '@launchdarkly/toolbar/angular';
4
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar/plugins';
5
import { environment } from '../environments/environment';
6
7
@Component({
8
  selector: 'app-root',
9
  template: `<router-outlet></router-outlet>`,
10
  providers: [LaunchDarklyToolbarService],
11
})
12
export class AppComponent implements OnInit {
13
  private flagOverridePlugin = new FlagOverridePlugin();
14
  private eventInterceptionPlugin = new EventInterceptionPlugin();
15
  private ldClient: LDClient.LDClient;
16
17
  constructor(private toolbarService: LaunchDarklyToolbarService) {
18
    // Initialize LaunchDarkly client
19
    this.ldClient = LDClient.initialize(
20
      'client-side-id-123abc',
21
      {
22
        kind: 'user',
23
        key: 'user-key-123abc',
24
        name: 'Sandy Smith',
25
        email: 'sandy@example.com',
26
      },
27
      {
28
        plugins: [this.flagOverridePlugin, this.eventInterceptionPlugin],
29
      },
30
    );
31
  }
32
33
  async ngOnInit() {
34
    await this.ldClient.waitForInitialization();
35
36
    // Initialize toolbar with the same plugin instances
37
    if (!environment.production) {
38
      await this.toolbarService.initialize({
39
        flagOverridePlugin: this.flagOverridePlugin,
40
        eventInterceptionPlugin: this.eventInterceptionPlugin,
41
42
        // OR Dev Server Mode
43
        devServerUrl: 'http://localhost:8080',
44
        projectKey: 'my-project',
45
46
        position: 'bottom-right',
47
        enabled: true,
48
      });
49
    }
50
  }
51
}

1
<script src="https://unpkg.com/@launchdarkly/toolbar@latest/cdn/toolbar.min.js"></script>

1
import * as LDClient from 'launchdarkly-js-client-sdk';
2
import { FlagOverridePlugin, EventInterceptionPlugin } from '@launchdarkly/toolbar';
3
4
// Pass these plugins into both the JS client and 
5
// the window.LaunchDarklyToolbar.init() call.
6
const flagOverridePlugin = new FlagOverridePlugin();
7
const eventInterceptionPlugin = new EventInterceptionPlugin();
8
9
const context: LDClient.LDContext = {
10
  kind: 'user',
11
  key: 'example-context-key',
12
};
13
14
const client = LDClient.initialize('example-client-side-id', context, {
15
  plugins: [
16
    flagOverridePlugin,
17
    eventInterceptionPlugin,
18
    // other plugins...
19
  ],
20
  // other options...
21
});
22
23
try {
24
  await client.waitForInitialization(5);
25
  // initialization succeeded, flag values are now available
26
  handleInitializedClient(client);
27
} catch (err) {
28
  // initialization failed or did not complete before timeout
29
}
30
31
// Only initialize the toolbar in local environments
32
if (process.env.NODE_ENV === 'development' && window.LaunchDarklyToolbar) {
33
  window.LaunchDarklyToolbar.init({
34
    flagOverridePlugin,
35
    eventInterceptionPlugin,
36
    // other toolbar options...
37
  });
38
}

1
import type { LaunchDarklyToolbar } from '@launchdarkly/toolbar';
2
3
declare global {
4
  interface Window {
5
    LaunchDarklyToolbar?: LaunchDarklyToolbar;
6
  }
7
}