Electron sample (#12960)

## What Add an Electron sample that integrates with multiple Azure services. ## Why As part of our investigation into how well our SDKs integrate into existing frameworks we created a few sample apps that showcase how to use the various SDKs. Adding a sample here would ensure that we have something to reference and provide to folks who are interested in using our SDKs in Electron.
Azure · Dec 23, 2020 · a951f24 · a951f24
1 parent 3eba27e
commit a951f24
Show file tree

Hide file tree

Showing 14 changed files with 814 additions and 4 deletions.
diff --git a/samples/frameworks/electron/arm-template.json b/samples/frameworks/electron/arm-template.json
@@ -0,0 +1,142 @@
+{
+  "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
+  "contentVersion": "1.0.0.0",
+  "parameters": {
+    "baseName": {
+      "type": "string",
+      "defaultValue": "[resourceGroup().name]",
+      "metadata": {
+        "description": "The base resource name."
+      }
+    }
+  },
+  "variables": {
+    "serviceBusQueue": "events",
+    "serviceBusNamespace": "[concat(parameters('baseName'), 'servicebus')]",
+    "storageAccount": "[concat(replace(parameters('baseName'), '-', ''), 'storage')]",
+    "storageContainer": "[concat(replace(parameters('baseName'), '-', ''), 'storage', '/default/blobs')]",
+    "location": "[resourceGroup().location]"
+  },
+  "resources": [
+    {
+      "type": "Microsoft.ServiceBus/namespaces",
+      "apiVersion": "2018-01-01-preview",
+      "name": "[variables('serviceBusNamespace')]",
+      "location": "[variables('location')]",
+      "sku": {
+        "name": "Standard",
+        "tier": "Standard"
+      },
+      "properties": {
+        "zoneRedundant": false
+      }
+    },
+    {
+      "type": "Microsoft.ServiceBus/namespaces/queues",
+      "apiVersion": "2017-04-01",
+      "name": "[concat(variables('serviceBusNamespace'), '/', variables('serviceBusQueue'))]",
+      "location": "West US 2",
+      "dependsOn": [
+        "[resourceId('Microsoft.ServiceBus/namespaces', variables('serviceBusNamespace'))]"
+      ],
+      "properties": {
+        "lockDuration": "PT30S",
+        "maxSizeInMegabytes": 1024,
+        "requiresDuplicateDetection": false,
+        "requiresSession": false,
+        "defaultMessageTimeToLive": "P14D",
+        "deadLetteringOnMessageExpiration": false,
+        "enableBatchedOperations": true,
+        "duplicateDetectionHistoryTimeWindow": "PT10M",
+        "maxDeliveryCount": 10,
+        "status": "Active",
+        "autoDeleteOnIdle": "P10675199DT2H48M5.4775807S",
+        "enablePartitioning": false,
+        "enableExpress": false
+      }
+    },
+    {
+      "type": "Microsoft.Storage/storageAccounts",
+      "apiVersion": "2020-08-01-preview",
+      "name": "[variables('storageAccount')]",
+      "location": "[variables('location')]",
+      "sku": {
+        "name": "Standard_RAGRS",
+        "tier": "Standard"
+      },
+      "kind": "StorageV2",
+      "properties": {
+        "networkAcls": {
+          "bypass": "AzureServices",
+          "virtualNetworkRules": [],
+          "ipRules": [],
+          "defaultAction": "Allow"
+        },
+        "supportsHttpsTrafficOnly": true,
+        "encryption": {
+          "services": {
+            "file": {
+              "keyType": "Account",
+              "enabled": true
+            },
+            "blob": {
+              "keyType": "Account",
+              "enabled": true
+            }
+          },
+          "keySource": "Microsoft.Storage"
+        },
+        "accessTier": "Hot"
+      }
+    },
+    {
+      "type": "Microsoft.Storage/storageAccounts/blobServices",
+      "apiVersion": "2020-08-01-preview",
+      "name": "[concat(variables('storageAccount'), '/default')]",
+      "dependsOn": [
+        "[resourceId('Microsoft.Storage/storageAccounts', variables('storageAccount'))]"
+      ],
+      "sku": {
+        "name": "Standard_RAGRS",
+        "tier": "Standard"
+      },
+      "properties": {
+        "deleteRetentionPolicy": {
+          "enabled": false
+        }
+      }
+    },
+    {
+      "type": "Microsoft.Storage/storageAccounts/blobServices/containers",
+      "apiVersion": "2020-08-01-preview",
+      "name": "[variables('storageContainer')]",
+      "dependsOn": [
+        "[resourceId('Microsoft.Storage/storageAccounts/blobServices', variables('storageAccount'), 'default')]",
+        "[resourceId('Microsoft.Storage/storageAccounts', variables('storageAccount'))]"
+      ],
+      "properties": {
+        "defaultEncryptionScope": "$account-encryption-key",
+        "denyEncryptionScopeOverride": false,
+        "publicAccess": "None"
+      }
+    }
+  ],
+  "outputs": {
+    "service_bus_namespace": {
+      "type": "string",
+      "value": "[concat(variables('serviceBusNamespace'), '.servicebus.windows.net')]"
+    },
+    "service_bus_queue": {
+      "type": "string",
+      "value": "[variables('serviceBusQueue')]"
+    },
+    "blob_uri": {
+      "type": "string",
+      "value": "[reference(variables('storageAccount')).primaryEndpoints.blob]"
+    },
+    "blob_container": {
+      "type": "string",
+      "value": "[last(split(variables('storageContainer'), '/'))]"
+    }
+  }
+}
diff --git a/samples/frameworks/electron/ts/.gitignore b/samples/frameworks/electron/ts/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+dist/
+data/
+.env
diff --git a/samples/frameworks/electron/ts/README.md b/samples/frameworks/electron/ts/README.md
@@ -0,0 +1,80 @@
+# Azure SDK samples for Electron (TypeScript)
+
+This sample application shows how to use the TypeScript client libraries for Azure in some common scenarios.
+
+In this sample, we build a simple [Electron][electron] application and integrating with various Azure services.
+
+- Integration with Azure Service Bus to support a single instance publishing and receiving Service Bus messages.
+- Integration with Azure Storage Blob for persisting notes.
+
+## Prerequisites
+
+The samples are compatible with Node.js >= 8.0.0.
+
+Before running the samples in Node, they must be compiled to JavaScript using the TypeScript compiler. For more information on TypeScript, see the [TypeScript documentation][typescript].
+
+You need [an Azure subscription][freesub] and the following resources created to run this sample:
+
+- An Azure Service Bus namespace and queue. Please refer to the [ServiceBus documentation][servicebus] for additional information on Service Bus.
+- An Azure Storage Blob container. Please refer to the [Storage Blob documentation][storageblob] for additional information on Azure Storage Blob. This file will be fetched from Azure Storage Blob and displayed on the screen.
+- Finally, you'll need a way to authenticate the application with Azure. Please refer to the [@azure/identity][identity] package for information on authentication. The instructions below will walk you through the necessary steps.
+
+To quickly create the needed resources in Azure and to receive the necessary environment variables for them, you can deploy our sample template by clicking:
+
+[![](http://azuredeploy.net/deploybutton.png)](https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure%2Fazure-sdk-for-js%2Fmaster%2Fsamples%2Fframeworks%2Felectron%2Farm-template.json)
+
+The above template will create the necessary resources for you and the output tab will contain the exact environment variables that you'll need as soon as deployment succeeds. When the deployment is finished, head over to the "outputs" tab and copy the outputs to a local file - you'll need them in the next step.
+
+### Register a new application in AAD and assign the "Azure Service Bus Data Owner" and "Azure Storage Blob Data Contributor" role to it.
+
+Authentication will still need to be set-up manually using the following instructions:
+
+- See https://docs.microsoft.com/azure/active-directory/develop/quickstart-register-app
+  to register a new application in the Azure Active Directory.
+- Note down the client id and tenant id from the above step.
+  You will need to set these in the constants.ts file later.
+
+For Electron we also need to configure platform settings correctly, and we will use `msal://` as the custom scheme. To set that up in your app registration:
+
+1. Click on Authentication in the app registration side bar
+2. Select "Add a platform"
+3. Select "Mobile and Desktop Application"
+4. In the "Custom redirect URIs" field please enter: msal://redirect
+5. Click "Configure"
+
+In your app registration, you will also need to add a permission for the `Microsoft.ServiceBus` and `Azure Storage` apps.
+When adding permission for `Microsoft.ServiceBus` and `Azure Storage`, the type should be `delegated permissions` and the permission should be `user_impersonation`.
+
+Finally, as mentioned in the header you'll need to make sure your application has the "Azure Service Bus Data Owner" and the "Azure Storage Blob Data Contributor" roles assigned to it. Please refer to the [Service Bus Role Assignment][servicebusaad] and [Azure Storage Role Assignment][storageaad] for up-to-date instructions on how to configure those.
+
+## Running the sample
+
+Once the above steps are completed you'll want to ensure Electron has the necessary constants defined. To do this, open `src/constants.ts` and provide the necessary values to configre the application. Only empty strings need to be replaced with actual values.
+
+Install the various packages as well as the TypeScript compiler using:
+
+```bash
+npm install
+```
+
+Run the sample app:
+
+```bash
+npm start
+```
+
+A new electron window will open containing a single Log In button. Once you login you'll be able to send and receive Service Bus messages as well as fetch and display a text file from Azure Blob Storage.
+
+## Next Steps
+
+Take a look at our [API Documentation][apiref] for more information about the APIs that are avaiable.
+
+[electron]: https://www.electronjs.org/
+[typescript]: https://www.typescriptlang.org/docs/home.html
+[freesub]: https://azure.microsoft.com/free
+[servicebus]: https://docs.microsoft.com/javascript/api/@azure/service-bus
+[storageblob]: https://docs.microsoft.com/javascript/api/@azure/storage-blob
+[identity]: https://docs.microsoft.com/javascript/api/@azure/identity
+[apiref]: https://docs.microsoft.com/javascript/api/
+[servicebusaad]: https://docs.microsoft.com/en-us/azure/service-bus-messaging/authenticate-application
+[storageaad]: https://docs.microsoft.com/en-us/azure/storage/common/storage-auth-aad-rbac-portal
diff --git a/samples/frameworks/electron/ts/index.html b/samples/frameworks/electron/ts/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+    <title>Electron Sample App</title>
+
+    <!-- adding Bootstrap 4 for UI components  -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
+    />
+    <link rel="icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon" />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+      <a class="navbar-brand" href="/">Electron proof of concept</a>
+      <div class="btn-group ml-auto dropleft">
+        <button type="button" id="sign-in" class="btn btn-secondary" aria-expanded="false">
+          Sign In
+        </button>
+        <button
+          type="button"
+          id="sign-out"
+          class="btn btn-secondary"
+          aria-expanded="false"
+          style="display: none;"
+        >
+          Sign Out
+        </button>
+      </div>
+    </nav>
+    <div class="row" style="margin:auto">
+      <div id="card-div" style="display:none; width: 100%;">
+        <div class="card text-center">
+          <div class="card-body">
+            <button class="btn btn-primary" id="fetch-blob">Get Uploaded Blob</button>
+            <button class="btn btn-primary" id="upload-blob">Upload a Blob</button>
+            <button class="btn btn-primary" id="send-sb-message">Send ServiceBus message</button>
+          </div>
+          <div id="message-div" style="display: none;"></div>
+        </div>
+      </div>
+    </div>
+    <br />
+    <br />
+
+    <!-- importing bootstrap.js and supporting js libraries -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- importing app scripts | load order is important -->
+    <script>
+      require("./dist/Renderer.js");
+    </script>
+  </body>
+</html>
diff --git a/samples/frameworks/electron/ts/package.json b/samples/frameworks/electron/ts/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "electron-test-app",
+  "version": "1.0.0",
+  "description": "A sample Electron application",
+  "main": "main.ts",
+  "private": true,
+  "scripts": {
+    "build": "tsc",
+    "start": "npm run build && electron dist/main.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "electron",
+    "javascript"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/qs": "^6.9.5",
+    "babel": "^6.23.0",
+    "electron": "^10.2.0",
+    "prettier": "^1.16.4",
+    "typescript": "^4.1.2",
+    "webpack": "^5.6.0"
+  },
+  "dependencies": {
+    "@azure/identity": "^1.2.0",
+    "@azure/logger": "^1.0.0",
+    "@azure/service-bus": "^7.0.0",
+    "@azure/storage-blob": "^12.3.0",
+    "qs": "^6.9.4"
+  }
+}