Exercise - Analyze the limitations of a polling-based web app - Training

15 minutes

Before you change the prototype, you need to run it to validate the assumptions. The prototype is in a source code repository on GitHub.

Create Azure resources

In a separate browser tab or window, fork the sample repository on GitHub with the following link: mslearn-advocates.azure-functions-and-signalr. 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.

In the terminal, clone the repository. In the following command, replace MicrosoftDocs with your account:

git clone https://github.com/MicrosoftDocs/mslearn-advocates.azure-functions-and-signalr stock-prototype

Install the dependencies in the setup-resources folder.
```
cd stock-prototype/setup-resources && npm install
```
If you receive warnings about EBADENGINE, you can ignore them.
Sign in to Azure with the Azure CLI.
```
az login
```
View your subscriptions and set your default Azure subscription.

View the subscriptions.
```
az account list --output json | jq -r '.[] | .name' | sort
```
To set the default subscription, replace YOUR-SUBSCRIPTION-ID with a subscription ID from the previous Azure CLI output.
```
az account set --subscription <YOUR-SUBSCRIPTION-ID>
```
This default subscription is used to create the Azure resources.
Create the Azure resources and upload the sample data to the database. The process may take a few minutes to complete.
```
bash create-start-resources.sh "<YOUR-SUBSCRIPTION-NAME>"
```
Make sure you wrap the name in double quotes.

Copy the required information, you'll need these to run the prototype.

Resource Type	Environment variable
Azure Cosmos DB	Referred to as COSMOSDB_CONNECTION_STRING
Azure Storage	Referred to as STORAGE_CONNECTION_STRING
Resource Group	Referred to as RESOURCE_GROUP_NAME.

Use a Node.js script to upload sample data into the database with the following command.
```
npm start
```
In the terminal, navigate to the root folder.
```
cd ..
```

Install dependencies and run the prototype

Install the dependencies.

cd start/client && npm install && cd ../..
cd start/server && npm install && cd ../..

If the notification asks you to select an Azure functions app for the workspace, select start/server. This is the function app that you'll use to run the server-side code.
If you receive a notification about installing the latest Azure Functions Core Tools, select Install.

Get the client and server URLs

When running locally, the client and server applications need to know where to find each other. The URLs are:

Client: http://localhost:3000
Server: http://localhost:7071

Update local settings for the Azure Functions app

Add the connection strings to the prototype's Azure Functions app.

Create the ./start/server/local.settings.json file and paste in the following. This file has the configuration settings for the local functions project.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "<STORAGE_CONNECTION_STRING>",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "COSMOSDB_CONNECTION_STRING": "<COSMOSDB_CONNECTION_STRING>"
  },
  "Host" : {
    "LocalHttpPort": 7071,
    "CORS": "http://localhost:3000",
    "CORSCredentials": true
  }
}

Update the following variables with values you copied from above.

Property Value

AzureWebJobsStorage Replace with the Storage connection string.

COSMOSDB_CONNECTION_STRING Replace with the Cosmos DB connection string.

Now the Functions app can receive requests from the client, then connect to the database and correctly manage the timer trigger.

Property	Value
AzureWebJobsStorage	Replace with the Storage connection string.
COSMOSDB_CONNECTION_STRING	Replace with the Cosmos DB connection string.

Add local settings for the Client app

Add the server URL to the prototype's client application.

Open ./start/client and create a .env file with the following contents.

BACKEND_URL=http://localhost:7071

Run the server application

In the terminal, start the Azure Functions application.
```
cd start/server && npm start
```

Wait until the terminal displays the API endpoints.

Functions:

        getStocks: [GET] http://localhost:7071/api/getStocks

        setPrice: timerTrigger

Run the client application

In a new terminal, start the client application.
```
cd start/client && npm start
```
When the notification displays that the application is running, select Open in Browser to use the prototype.
Arrange your browser windows so you can see the terminal and the prototype of the stock prices at the same time.
In the prototype browser window, open the browser's developer tools. Notice the browser is making a request to the API every 5 seconds for all the data, even though the data hasn't changed.
In the browser window, watch the output for the Azure Functions app. A single stock price changes every minute. When the price in the API changes, the next client fetch of all data includes that change.
In both the start-client and start server terminals, stop the applications with Ctrl + C 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.

Continue

Exercise - Analyze the limitations of a polling-based web app