Skip to content

Commit 1048727

Browse files
joker23joker23
committed
chore: add an example app for browser sdk
1 parent 86a4e53 commit 1048727

File tree

8 files changed

+168
-1
lines changed

8 files changed

+168
-1
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
"packages/sdk/combined-browser",
4545
"packages/sdk/shopify-oxygen",
4646
"packages/sdk/shopify-oxygen/contract-tests",
47-
"packages/sdk/shopify-oxygen/example"
47+
"packages/sdk/shopify-oxygen/example",
48+
"packages/sdk/browser/example"
4849
],
4950
"private": true,
5051
"scripts": {

‎packages/sdk/browser/example/README.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# LaunchDarkly sample javascript application
2+
3+
# ⛔️⛔️⛔️⛔️
4+
5+
> [!CAUTION]
6+
> This example is created against a non-production SDK which means things may change and this example might
7+
> not work while this message is visible.
8+
9+
# ☝️☝️☝️☝️☝️☝️
10+
11+
We've built a simple browser application that demonstrates how this LaunchDarkly SDK works.
12+
13+
Below, you'll find the build procedure. For more comprehensive instructions, you can visit your [Quickstart page](https://app.launchdarkly.com/quickstart#/) or
14+
the [{name of SDK} reference guide](https://docs.launchdarkly.com/sdk/client-side/javascript).
15+
16+
## Build instructions
17+
18+
Modify [app.ts](./src/app.ts) with the following changes:
19+
20+
1. Set the value of the {`clientSideID`} variable in {file name} to your client-side ID:
21+
```typescript
22+
const clientSideID = "my-client-side-id";
23+
```
24+
25+
2. If there is an existing boolean feature flag in your LaunchDarkly project that
26+
you want to evaluate, set `flagKey` to the flag key:
27+
```typescript
28+
const flagKey = "my-flag-key";
29+
```
30+
31+
3. If you haven't already, install and build the project:
32+
```bash
33+
yarn && yarn build
34+
```
35+
36+
4. On the command line, run `yarn start`
37+
```bash
38+
yarn start
39+
```
40+
> [!NOTE]
41+
> The `yarn start` script simply runs `open index.html`. If that is not working for you,
42+
> you can open the `index.html` file in a browser for the same results.
43+
44+
The application will run continuously and react to the flag changes in LaunchDarkly.

‎packages/sdk/browser/example/index.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
body {
2+
margin: 0;
3+
background: #373841;
4+
color: white;
5+
font-family:
6+
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
7+
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
text-align: center;
11+
}

‎packages/sdk/browser/example/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
6+
<title>LaunchDarkly tutorial</title>
7+
<script src="./dist/app.js" defer></script>
8+
<link rel="stylesheet" href="./index.css">
9+
</head>
10+
<body></body>
11+
</html>

‎packages/sdk/browser/example/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "@launchdarkly/browser-example",
3+
"version": "0.0.0",
4+
"prviate": true,
5+
"description": "LaunchDarkly example for JavaScript Browser SDK",
6+
"homepage": "https://github.com/launchdarkly/js-core/tree/main/packages/sdk/browser/example",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/launchdarkly/js-core.git"
10+
},
11+
"license": "Apache-2.0",
12+
"packageManager": "[email protected]",
13+
"type": "module",
14+
"scripts": {
15+
"start": "open index.html",
16+
"clean": "rm -rf dist dist-static",
17+
"build": "npm run clean && tsdown"
18+
},
19+
"dependencies": {
20+
"@launchdarkly/js-client-sdk": "workspace:^",
21+
"express": "^5.1.0"
22+
},
23+
"devDependencies": {
24+
"tsdown": "^0.17.0-beta.4",
25+
"typescript": "^5.9.3"
26+
}
27+
}

‎packages/sdk/browser/example/src/app.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { initialize } from '@launchdarkly/js-client-sdk';
2+
3+
// Set clientSideID to your LaunchDarkly client-side ID
4+
const clientSideID = '';
5+
6+
// Set flagKey to the feature flag key you want to evaluate
7+
const flagKey = 'sample-feature';
8+
9+
// Set up the evaluation context. This context should appear on your
10+
// LaunchDarkly contexts dashboard soon after you run the demo.
11+
const context = {
12+
kind: 'user',
13+
key: 'example-user-key',
14+
name: 'Sandy',
15+
};
16+
17+
const div = document.createElement('div');
18+
document.body.appendChild(div);
19+
div.appendChild(document.createTextNode('Initializing...'));
20+
21+
const ldclient = initialize(clientSideID);
22+
23+
function render() {
24+
const flagValue = ldclient.variation(flagKey, false);
25+
const label = `The ${flagKey} feature flag evaluates to ${flagValue}.`;
26+
document.body.style.background = flagValue ? '#00844B' : '#373841';
27+
div.replaceChild(document.createTextNode(label), div.firstChild as Node);
28+
}
29+
30+
ldclient.identify(context).then(() => {
31+
ldclient.on('initialized', () => {
32+
div.replaceChild(
33+
document.createTextNode('SDK successfully initialized!'),
34+
div.firstChild as Node,
35+
);
36+
});
37+
ldclient.on('failed', () => {
38+
div.replaceChild(document.createTextNode('SDK failed to initialize'), div.firstChild as Node);
39+
});
40+
ldclient.on('ready', render);
41+
ldclient.on('change', render);
42+
});

‎packages/sdk/browser/example/tsconfig.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": true,
4+
"declaration": true,
5+
"declarationMap": true,
6+
"lib": ["ES2017", "dom"],
7+
"module": "ESNext",
8+
"moduleResolution": "node",
9+
"noImplicitOverride": true,
10+
"resolveJsonModule": true,
11+
"rootDir": ".",
12+
"outDir": "dist",
13+
"skipLibCheck": true,
14+
"sourceMap": true,
15+
"inlineSources": true,
16+
"strict": true,
17+
"stripInternal": true,
18+
"target": "ES2017",
19+
"allowJs": true
20+
},
21+
"include": ["src"]
22+
}

‎packages/sdk/browser/example/tsdown.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import { defineConfig } from 'tsdown';
3+
4+
export default defineConfig({
5+
entry: 'src/app.ts',
6+
platform: 'browser',
7+
outDir: 'dist',
8+
noExternal: ['@launchdarkly/js-client-sdk'],
9+
});

0 commit comments

Comments
 (0)