If you're a frontend and/or JavaScript developer, chances are you've heard of Svelte. In fact, if the latest State of JavaScript survey is accurate, there's a good chance that you will want to give it a try. That's because Svelte has remained the framework JavaScript developers are most interested in for two years in a row.
In case you haven't heard of Svelte, it's a frontend framework like React and Vue, but it has a very different approach. Whereas React and Vue do most of their work in the browser via included scripts, Svelte pushes this to the build step, performing most of its work during the compile. By doing so, it aims to reduce the size of the JavaScript bundle, which can make your application lighter and also potentially improve its performance.
The good news is that, since Svelte is just JavaScript, you don't need any framework-specific libraries to use it with LaunchDarkly—you can just leverage the existing JavaScript libraries.
This post will cover the basics of integrating Svelte and LaunchDarkly. If you are looking for something much more in depth, check out our guide to using LaunchDarkly with Svelte in the documentation.
Working with client-side Svelte code
There is nothing preventing you from adding feature flags to your heart's content in client-side code in Svelte using LaunchDarkly's JavaScript SDK. It'll just work as you expected, out of the box, using the same code as shown in the SDK documentation.
For example, the below is a basic Svelte component that does the following:
- Imports the JavaScript SDK.
- Initializes the client using the Client-side ID and an anonymous user key.
- When the client is initialized and ready, it gets the value of the
show-buttonboolean flag. - Sets a listener on the change event for the flag so that any change to the flag value in LaunchDarkly will be immediately reflected on the client.
- If the flag is true, the button will display within the component. If it is false, the button is hidden.
<script>
import * as LaunchDarkly from "launchdarkly-js-client-sdk";
let showButton = false;
const client = LaunchDarkly.initialize("<LAUNCHDARKLY_CLIENT_ID>", {
key: "anonymous"
});
client.on("ready", () => {
setShowButton(client.variation("show-button", false));
client.on("change:show-button", setShowButton);
});
function setShowButton(val) {
showButton = val;
}
</script>
<style>
main {
font-family: sans-serif;
text-align: center;
}
</style>
<main>
<p>This will always show</p>
{#if showButton}
<button>Flag is true</button>
{/if}
</main>If you are building components in SvelteKit, you'll need to add a check to ensure that the code is running in the browser and not on the server by wrapping it in a browser check using the built-in $app/env module. Otherwise you'll receive compiler errors indicating that browser modules like window can't be found.
Working with Server-side Code in SvelteKit
Just as with client-side code in Svelte, no special library is necessary to work with LaunchDarkly within SvelteKit. You can use the server-side Node SDK.
However, you'll want to ensure that all interactions with the Node SDK are performed server-side only. The easiest way to do this is to isolate your interaction with the SDK in SvelteKit endpoints, which run exclusively server-side. The below example is a basic endpoint that gets the value of the featured-username flag and uses that to alter the parameters in an API call.
import LaunchDarkly from "launchdarkly-node-server-sdk";
export async function get() {
const client = LaunchDarkly.init(import.meta.env.VITE_LAUNCHDARKLY_SDK_KEY);
await client.waitForInitialization();
const featuredUsername = await client.variation("featured-username", { key: "anonymous"}, false);
const response = await fetch(
`https://dev.to/api/articles?username=${featuredUsername}&page=1&per_page=10`
);
let posts = await response.json();
return {
body: {
posts,
featuredUsername,
},
};
}In most cases, you won't want to reinitialize the library within every single endpoint that requires a flag. The most straightforward solution to this is to create a shared library that handles the initialization of the SDK and returns the client. Every endpoint that requires a flag value can then include this library to get an instance of the SDK client that has been initialized. You can see an example of this in the our Svelte guide.
Where to go from here
The good news is that you can use the existing LaunchDarkly JavaScript and Node SDKs within your Svelte project, without any complicated workarounds or framework specific code. The above examples just touched on the most basic implementation. If you are looking for a more in-depth tutorial and set of examples, definitely check out our complete guide to using LaunchDarkly with Svelte.
.webp)
