Using the JavaScript SDK in Salesforce Lightning Web Components

This guide explains how to configure your Salesforce environment to use the LaunchDarkly JavaScript or React Web client-side SDKs in Lightning Web Components (LWCs). Salesforce Lightning Web Components are an implementation of standard web components that allow you to leverage HTML, CSS, and JavaScript in a lightweight framework. To learn more, read Introducing Lightning Web Components. The example code in this guide is extracted snippets. We show it here as if it is being used in a JavaScript class.

Prerequisites

To complete this guide, you must have the following prerequisites:

Basic working knowledge of the LaunchDarkly JavaScript client-side SDK or React Web client-side SDK
Basic working knowledge of Salesforce Lightning Web Components

Download the LaunchDarkly JavaScript Client

To begin, find the latest version under Releases in the JavaScript SDK GitHub repository. Then download the desired version from https://unpkg.com/launchdarkly-js-client-sdk@<VERSION>/dist/ldclient.min.js.

Set up your Salesforce environment

Next, set up your Salesforce environment. To do this:

Upload the file to your Salesforce organization as a static resource in your org
Enable Lightning Web Security in your org
Add https://*.launchdarkly.com as a CSP Trusted Site, under Manage CSP Trusted Sites

Using the LaunchDarkly client in a Lightning Web Component

In the JavaScript file of your Lightning Web Component, import the static resource:

import ldclient from '@salesforce/resourceUrl/ldclient';

Then, load the imported script for usage in the file, using the Lightning Web Component Platform Resource Loader:

Promise.all([
	loadScript(this, ldclient)
])
.then(() => {
// Post Script Load Code Here
})

Finally, initialize the LaunchDarkly client:

const context = {
  kind: 'user',
  key: 'example-context-key'
};
this.LDClient = ldclient.initialize('example-client-side-id', context);

try {
  await this.LDClient.waitForInitialization(5)
  // initialization succeeded,
  // flag values are now available through the client
} catch (err) {
  // initialization failed or did not complete before timeout
}

You can access the flag value using a JavaScript getter method:

get exampleFlag() {
    return await this.LDClient.variation['example-flag-key', false];
}

To learn more, read LWC Data Binding. You can then use HTML to allow feature flags to control your user interface (UI) display. Here is an example of an LWC HTML snippet:

<template if:true={exampleFlag}>
     Flag evaluation is TRUE
</template>
<template if:false={exampleFlag}>
     Flag evaluation is FALSE
</template>

Conclusion

In this guide, we discussed how to use the LaunchDarkly JavaScript and React Web client-side SDKs in Lightning Web Components. This allows you to leverage HTML, CSS, and JavaScript in a lightweight framework.

Want to know more? Start a trial.Your 14-day trial begins as soon as you sign up. Get started in minutes using the in-app Quickstart. You’ll discover how easy it is to release, monitor, and optimize your software.

Want to try it out? Start a trial.

​Prerequisites

​Download the LaunchDarkly JavaScript Client

​Set up your Salesforce environment

​Using the LaunchDarkly client in a Lightning Web Component

​Conclusion

Prerequisites

Download the LaunchDarkly JavaScript Client

Set up your Salesforce environment

Using the LaunchDarkly client in a Lightning Web Component

Conclusion