Merge pull request #48797 from diberry/diberry/0121-signalr-functions-update

Fn + SignalR - updates

Author: Stacyrch140

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/1-introduction.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Introduction
   description: Learn to update an application to implement automatic updates that are nearly instantaneous.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/2-analyze-limitations-of-polling-in-a-web-app.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Analyze the limitations of a polling-based web app
   description: Discuss the drawbacks of a web application that relies on polling to keep the UI updated.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/3-exercise-analyze-limitations-of-polling-in-a-web-app.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Exercise - Analyze the limitations of a polling-based web app
   description: Review the implementation of polling website and run the app on your machine.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/4-enable-automatic-updates-in-a-web-app-using-signalr.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Enable automatic updates in a web application using SignalR Service
   description: Learn how a push-based architecture can make a better performing application.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/5-exercise-enable-automatic-updates-in-a-web-app-using-signalr.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Exercise – Enable automatic updates in a web application using SignalR Service
   description: Implement integration with Azure Functions and SignalR Service for fast and targeted automatic updates.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/6-host-a-static-website-using-a-storage-account.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Use a storage account to host a static website
   description: Learn how an Azure Storage account is able to host static files over a secure server.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/7-exercise-host-a-static-website-using-a-storage-account.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Exercise - Use a storage account to host a static website
   description: Customize your storage account, publish your function app and view your application hosted in the cloud.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/8-summary.yml

@@ -5,7 +5,7 @@ metadata:
   prefetch-feature-rollout: true
   title: Summary
   description: Review changes made to your application that removed polling and added server push technologies.
-  ms.date: 08/12/2024
+  ms.date: 01/22/2025
   author: craigshoemaker
   ms.author: cshoe
   ms.topic: unit

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/includes/3-exercise-analyze-limitations-of-polling-in-a-web-app.md

@@ -4,16 +4,16 @@ Before you change the prototype, you need to run it to validate the assumptions.
 
 1. In a separate browser tab or window, fork the sample repository on GitHub with the following link: [mslearn-advocates.azure-functions-and-signalr](https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr/fork). This allows you to push your changes to your own version of the source code. This is a required step in order to deploy the source code to Azure later in the module.
 
-1. In the terminal, clone the repository. In the following command, replace `MicrosoftDocs` with your account:
+1. In the terminal, clone your forked repository. In the following command, replace `MicrosoftDocs` with your account:
 
     ```bash
-    git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype
+    git clone https://github.com/<YOUR-GITHUB-ALIAS>/mslearn-advocates.azure-functions-and-signalr stock-prototype
     ```
 
 1. Install the dependencies in the **setup-resources** folder.
 
     ```bash
-    cd stock-prototype/setup-resources && npm install
+    cd setup-resources && npm install
     ```
 
     If you receive warnings about `EBADENGINE`,  you can ignore them.
@@ -56,12 +56,21 @@ Before you change the prototype, you need to run it to validate the assumptions.
     |Azure Storage|Referred to as STORAGE_CONNECTION_STRING|
     |Resource Group|Referred to as RESOURCE_GROUP_NAME.|
 
-1. Use a Node.js script to upload sample data into the database with the following command.
+1. At the terminal, still in the `setup-resources` directory, use a Node.js script to upload sample data into the database with the following command.
 
     ```bash
     npm start
     ```
 
+    The output shows the starting data for the fictitious stock application:
+
+    ```console
+    Seed data added. Symbol ABC
+    Seed data added. Symbol DEF
+    Seed data added. Symbol GHI
+    ```
+    
+
 1. In the terminal, navigate to the **root** folder.
 
     ```bash
@@ -152,6 +161,6 @@ BACKEND_URL=http://localhost:7071
 
     :::image type="content" source="../media/visual-studio-code-terminal-output-stock-change.png" alt-text="Screenshot of Visual Studio Code terminal showing console output of the stock price change.":::
 
-1. In both the start-client and start server terminals, stop the applications with <kbd>Ctrl</kbd> + <kbd>C</kbd> or kill the terminal by selecting the trashcan icon.
+1. In both the terminals for client and server, stop the applications with <kbd>Ctrl</kbd> + <kbd>C</kbd> or kill the terminal by selecting the trashcan icon.
 
 In this unit, you ran the prototype. While the client does run successfully, it isn't efficient. While each individual client may not notice this with such a small number of stocks, that will change as the number of stocks grows and the number of clients pull from the server. The prototype can be improved. Let's learn how in the next unit.

learn-pr/advocates/automatic-update-of-a-webapp-using-azure-functions-and-signalr/includes/5-exercise-enable-automatic-updates-in-a-web-app-using-signalr.md

@@ -12,7 +12,7 @@ You need to create an Azure SignalR resource.
 1. Navigate to the `setup-resources` subdirectory to create the resource.
 
     ```bash
-    cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..
+    cd setup-resources && bash create-signalr-resources.sh & cd ..
     ```
 
 1. Copy the connection string for the SignalR resource. You'll need this to update the server code.
@@ -85,10 +85,10 @@ The web client uses the SignalR client SDK to establish a connection to the serv
     ```bash
     git add .
     git commit -m "Add SignalR functions"
-    git push
+    git push origin main
     ```
 
-## Create the `signalr-send-message` function
+## Create the Azure Functions app
 
 Create a function app and related resources in Azure to which you can publish the new functions code.
 
@@ -97,14 +97,15 @@ Create a function app and related resources in Azure to which you can publish th
 
     | Name                                   | Value                          |
     | -------------------------------------- | ------------------------------ |
+    | Hosting                                | Select **Consumption Plan**.|
     | Resource group                         | Create a new resource group names `stock-prototype`.|
     | Function App name                      | Postpend your name to `api`. For example, `api-jamie`.|
     | Code or container                          | Select **code**.                       |
     | Runtime stack                        | Select **Node.js**.                       |
     | Version            |  Select an LTS version of Node.js.                    |
     | Region  | Select a region close to you.                           |
     | Operating System | Select **Linux**.|
-    | Hosting | Select **Consumption Plan**.|
+
 
 1. Don't fill out any other tabs and select **Review + create** then select **Create**. Wait for the deployment to complete before continuing.
 1. Select **Go to resource** to open the new function app.
@@ -122,25 +123,13 @@ Connect your new function app to the GitHub repository to enable continuous depl
     | Organization    | Select your GitHub account.                       |
     | Repository                        | Search for and select `mslearn-advocates.azure-functions-and-signalr`.                       |
     | Branch            | Select the **main** branch.                    |
-    | Workflow Option| Select **Add a workflow ...**.|
     | Authentication type | Select **User-assigned-identity**.|
     | Subscription | Select the same subscription as seen at the top of the page. |
     | Identity | Select **Create new**.|
 
 1. Select **Save** at the top of the section to save the settings. This creates a new workflow file in your forked repository.
 1. This deployment configuration creates a GitHub Actions workflow file in the repository. You need to update the workflow file to use the correct package path for the function app.
 
-<!--- Remove this content section after the OIDC subject bug gets fixed by the Functions folks -->
-At this point, your GitHub deployment might generate an error because of a wrong configuration in the user-assigned managed identity created in your resource group in Azure. 
-
-## Update the managed identity
-
-1. In your new function app page in the Azure portal, select your resource group in **Overview** > **Essentials**, then select the managed identity under **Resources**. This managed identity was created by Functions when you enabled the GitHub deployment.  
-1. In the **Managed Identity** page, select **Settings** > **Federated credentials** and then select the existing credential.
-1. In **Connect your Github account**, change the setting for **Entity** to **Environment** and enter `Production` for **Environment**.  
-1. Select **Update** to update the credential.
-<!--- end removal section -->
-
 ## Edit GitHub deployment workflow
 
 1. In Visual Studio Code terminal, pull down the new workflow file from your fork (origin). 
@@ -175,14 +164,14 @@ At this point, your GitHub deployment might generate an error because of a wrong
     ```bash
     git add .
     git commit -m "Update deployment workflow to use package path"
-    git push
+    git push origin main
     ```
 
     This change will trigger the workflow to run. You can watch the workflow from the **Actions** section of the fork on GitHub.
 
 ## Configure the environment variables for the API functions
 
-1. In the Azure portal, locate your function app and select **Settings** > **Configuration** then select **New application setting**.
+1. In the Azure portal, locate your function app and select **Settings** > **Environment variables** then select **+ Add**.
 1. Enter the settings for the Cosmos DB and SignalR connection strings. You can find the values in the `local.settings.json` in the `start/server` folder. 
 
     | Name | Value |
@@ -194,9 +183,8 @@ At this point, your GitHub deployment might generate an error because of a wrong
 
 ## Test the deployment of the API Functions
 
-1. In the Azure portal, select **Overview** and select **URL** to open the app in a browser. 
-1. Copy the URL, you'll need that when you update the client `.env` file for the `BACKEND_URL` value when you work in Unit 7. 
-1. Open the URL in a browser to test the API functions.
+1. In the Azure portal, select **Overview** and select **Default domain** to open the app in a browser to test the API functions.
 1. Append `/api/getStocks` to the URL in the browser and press **Enter**. You should see a JSON array with stock data.
+1. Copy the URL, you'll need that when you update the client `.env` file for the `BACKEND_URL` value when you work in Unit 7. 
 
 You've updated the server code to return stocks with SignalR and you've deployed to a function app. Next, you'll update the client to use SignalR to receive updates.