Add GitHub Actions workflow for Azure Node.js deployment

.github/workflows/azure-webapps-node.yml

@@ -0,0 +1,78 @@
+# This workflow will build and push a node.js application to an Azure Web App when a commit is pushed to your default branch.
+#
+# This workflow assumes you have already created the target Azure App Service web app.
+# For instructions see https://docs.microsoft.com/en-us/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli
+#
+# To configure this workflow:
+#
+# 1. Download the Publish Profile for your Azure Web App. You can download this file from the Overview page of your Web App in the Azure Portal.
+#    For more information: https://docs.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=applevel#generate-deployment-credentials
+#
+# 2. Create a secret in your repository named AZURE_WEBAPP_PUBLISH_PROFILE, paste the publish profile contents as the value of the secret.
+#    For instructions on obtaining the publish profile see: https://docs.microsoft.com/azure/app-service/deploy-github-actions#configure-the-github-secret
+#
+# 3. Change the value for the AZURE_WEBAPP_NAME. Optionally, change the AZURE_WEBAPP_PACKAGE_PATH and NODE_VERSION environment variables below.
+#
+# For more information on GitHub Actions for Azure: https://github.com/Azure/Actions
+# For more information on the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
+# For more samples to get started with GitHub Action workflows to deploy to Azure: https://github.com/Azure/actions-workflow-samples
+
+on:
+  push:
+    branches: [ "main" ]
+  workflow_dispatch:
+
+env:
+  AZURE_WEBAPP_NAME: your-app-name    # set this to your application's name
+  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
+  NODE_VERSION: '20.x'                # set this to the node version to use
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ env.NODE_VERSION }}
+        cache: 'npm'
+
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run build --if-present
+        npm run test --if-present
+
+    - name: Upload artifact for deployment job
+      uses: actions/upload-artifact@v4
+      with:
+        name: node-app
+        path: .
+
+  deploy:
+    permissions:
+      contents: none
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: 'Development'
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+
+    steps:
+    - name: Download artifact from build job
+      uses: actions/download-artifact@v4
+      with:
+        name: node-app
+
+    - name: 'Deploy to Azure WebApp'
+      id: deploy-to-webapp
+      uses: azure/webapps-deploy@v2
+      with:
+        app-name: ${{ env.AZURE_WEBAPP_NAME }}
+        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
+        package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

README.md

@@ -1,5 +1,8 @@
-### LaunchDarkly Sample JavaScript Application

-We've built a simple console application that demonstrates how LaunchDarkly's SDK works. 
Below, you'll find the basic build procedure, but for more comprehensive instructions, you can visit your [Quickstart page](https://app.launchdarkly.com/quickstart#/) or the [JavaScript SDK reference guide](https://docs.launchdarkly.com/sdk/client-side/javascript).
+### LaunchDarkly sample JavaScript application

+
+We've built a simple browser application that demonstrates how LaunchDarkly's SDK works.

+
+Below, you'll find the basic build procedure, but for more comprehensive instructions, you can visit your [Quickstart page](https://app.launchdarkly.com/quickstart#/) or the [JavaScript SDK reference guide](https://docs.launchdarkly.com/sdk/client-side/javascript).
 
 #### Build instructions

 
@@ -12,4 +15,4 @@ const flagKey = 'my-flag-key';
 
 2. Open `index.html` in your browser.
 
-You should receive the message "Feature flag key '<flag key>' is <true/false> for this user".
+You should receive the message "The <flagKey> feature flag evaluates to <flagValue>." The application will run continuously and react to the flag changes in LaunchDarkly.

index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  background: #373841;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+

index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
     <title>LaunchDarkly tutorial</title>
-    <script src="https://unpkg.com/launchdarkly-js-client-sdk@2"></script>
+    <script src="https://unpkg.com/launchdarkly-js-client-sdk@3"></script>
+    <link rel="stylesheet" href="./index.css">
   </head>
   <body>
     <script>
@@ -14,13 +15,14 @@
       const clientSideID = '';
 
       // Set flagKey to the feature flag key you want to evaluate
-      const flagKey = 'my-boolean-flag';
-
-      // Set up the user properties. This user should appear on your
-      // LaunchDarkly users dashboard soon after you run the demo.
-      const user = {
-        'key': 'example-user-key',
-        'name': 'Sandy'
+      const flagKey = 'sample-feature';
+
+      // Set up the evaluation context. This context should appear on your
+      // LaunchDarkly contexts dashboard soon after you run the demo.
+      const context = {
+        kind: 'user',
+        key: 'example-user-key',
+        name: 'Sandy'
       };
 
       var div = document.createElement('div');
@@ -32,31 +34,23 @@
         return;
       }
 
-      const ldclient = LDClient.initialize(clientSideID, user);
+      const ldclient = LDClient.initialize(clientSideID, context);
 
       function render() {
         const flagValue = ldclient.variation(flagKey, false);
-        const label = 'Feature flag ' + flagKey + ' is ' + flagValue + ' for this user';
+      const label = `The ${flagKey} feature flag evaluates to ${flagValue}.`;
+      document.body.style.background = flagValue ? '#00844B' : '#373841';
         div.replaceChild(document.createTextNode(label), div.firstChild);
       }
 
       ldclient.on('initialized', () => {
-        div.appendChild(document.createTextNode('SDK successfully initialized!'), div.firstChild);
+        div.replaceChild(document.createTextNode('SDK successfully initialized!'), div.firstChild);
       });
       ldclient.on('failed', () => {
-        div.appendChild(document.createTextNode('SDK failed to initialize'), div.firstChild);
+        div.replaceChild(document.createTextNode('SDK failed to initialize'), div.firstChild);
       });
       ldclient.on('ready', render);
       ldclient.on('change', render);
-
-
-      // Here we ensure that the SDK shuts down cleanly and has a chance
-      // to deliver analytics envets to LaunchDarkly before the program
-      // exits. If analytics events are not delivered, the user properties
-      // and flag usage statistics will not appear on your dashboard.
-      // In a normal long-running application, the SDK would continue
-      // running and events would be delivered automatically in the background.
-      ldclient.close();
     }
     main();
     </script>