[samples] Update web-workers sample (#31060)

Resolves #31049 

A few changes were needed here:

1. Upgrade jsdom to >= 19 in the JS sample, similar to
#20934 which fixed the
TS sample
2. Update the sample to use a SAS URL so that it can be runnable
3. Remove usage of env vars, instead using the string directly and
recommending passing a SAS URL from the server in production

Author: maorleger

samples/web-workers/README.md

@@ -26,7 +26,7 @@ Before running the TypeScript samples, they must be compiled to JavaScript using
 
 You need [an Azure subscription][freesub] and an Azure Storage Blob container to run this sample. Please refer to the [Storage Blob documentation][storageblob] for additional information on Azure Storage Blob.
 
-To avoid complexity in this sample, we will be using a [SAS Connection String][storageblobsas] to authenticate our client. The ARM template we include will output a SAS Connection String valid for 2 hours which you can then copy and paste into the included `env` files.
+To avoid complexity in this sample, we will be using a [SAS URL][storageblobsas] to authenticate our client. The ARM template we include will output a SAS URL valid for 2 hours.
 
 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:
 
@@ -36,9 +36,9 @@ Once the deployment completes, head over to the "outputs" tab and copy the outpu
 
 ## Running the sample
 
-Once the above resources are created you'll want to ensure our application has the necessary environment variables. To do this, copy `sample.env` as `.env` and provide the necessary environment variables to configure the application. You can get the values from the output tab of the deployment.
+Once the above resources are created you'll want to ensure our application has the necessary values. To do this, open `workers.ts` (or `workers.js` if you are using the JavaScript sample) and set `containerSasUrl` to the generated SAS URL from the deployment. You can get that value from the output tab of the deployment.
 
-> Remember: we are using a connection string to keep this sample simple; however, parcel will embed the connection string into your published bundle which is not suitable for production as it may leak secrets. For production client side applications, you may be interested in the [@azure/identity][identity] package which provides a set of credential implementations for both NodeJS and the browser.
+> Remember: we are using a connection string to keep this sample simple; however, parcel will embed the connection string into your published bundle which is not suitable for production as it may leak secrets. For production client side applications, you may be interested in the [@azure/identity][identity] package which provides a set of credential implementations for both NodeJS and the browser. Alternatively, you may generate a SAS URL from your server-side component and provide it to your client at runtime.
 
 Install the various packages as well as the TypeScript compiler using:
 

samples/web-workers/arm-template.json

@@ -56,9 +56,7 @@
           "type": "blobServices",
           "apiVersion": "2019-06-01",
           "name": "default",
-          "dependsOn": [
-            "[variables('storageAccountName')]"
-          ],
+          "dependsOn": ["[variables('storageAccountName')]"],
           "properties": {
             "cors": {
               "corsRules": [
@@ -88,9 +86,9 @@
     }
   ],
   "outputs": {
-    "azure_storage_blob_connection_string": {
+    "azure_storage_blob_sas_url": {
       "type": "string",
-      "value": "[concat('BlobEndpoint=https://',variables('storageAccountName'),'.blob.core.windows.net/','blobs',';SharedAccessSignature=', listAccountSas(variables('storageAccountName'), '2019-06-01', variables('accountSasProperties')).accountSasToken)]"
+      "value": "[concat('https://',variables('storageAccountName'),'.blob.core.windows.net/','blobs','?', listAccountSas(variables('storageAccountName'), '2019-06-01', variables('accountSasProperties')).accountSasToken)]"
     },
     "azure_storage_blob_container_name": {
       "type": "string",

samples/web-workers/js/package.json

@@ -18,6 +18,6 @@
   ],
   "dependencies": {
     "@azure/storage-blob": "^12.5.0",
-    "jsdom": "^16.5.0"
+    "jsdom": "^19.0.0"
   }
 }

samples/web-workers/js/sample.env

@@ -8,7 +8,11 @@ import { ContainerClient } from "@azure/storage-blob";
 async function uploadToStorageBlob() {
   // For example, in Azure public cloud, a container SAS URL has the form of
   // `https://${account}.blob.core.windows.net/${containerName}?${sasToken}`
-  const containerSasUrl = "<container SAS url>";
+  const containerSasUrl = ""; // <replace this empty string with your SAS URL>
+
+  if (!containerSasUrl) {
+    throw new Error("Please replace the placeholder value of containerSasUrl with your SAS URL.");
+  }
 
   const data = "Hello, Web Workers!";
 

samples/web-workers/js/worker.js

@@ -9,7 +9,11 @@ import { ContainerClient } from "@azure/storage-blob";
 async function uploadToStorageBlob() {
   // For example, in Azure public cloud, a container SAS URL has the form of
   // `https://${account}.blob.core.windows.net/${containerName}?${sasToken}`
-  const containerSasUrl = "<container SAS url>";
+  const containerSasUrl = ""; // <replace this empty string with your SAS URL>
+
+  if (!containerSasUrl) {
+    throw new Error("Please replace the placeholder value of containerSasUrl with your SAS URL.");
+  }
 
   const data = "Hello, Web Workers!";