Live Charts Using Azure Cosmos DB, Azure Functions, SignalR And WPF - Part Three

Introduction

This article series is aimed at teaching you how to use Cosmos DB trigger and HttpTrigger in an Azure function to create a serverless app that can broadcast the data to clients using SignalR. The client can be a desktop/web/mobile client. For this article, I will be using a simple desktop client created using WPF with Material Design. To follow along please make sure you have an Azure account. If you don't have it already you can create one for free by visiting Cloud Computing Services | Microsoft Azure.

This article is part 3 of the series and is aimed at teaching the readers how to publish a new Azure function (using VS 2019) to Azure Cloud. To follow along please make sure to refer to Part 1 and Part 2 of this article series to learn how to create Cosmos DB and Azure functions that we will be publishing as a part of this tutorial.

Step 1 - Publish the Azure Function on Azure Cloud

Open Visual Studio and open your Azure Functions project. Right-click on the project name on Solution Explorer and click Publish

In the Publish window that opens choose target as Azure and click the Next button

In the Specific Target, window choose Azure Function App (Windows) and click Next

In the Functions Instance window make sure your Subscription name is populated and click the small green plus (+) button

Clicking the plus button will open a new popup to create new functions app. Give a proper meaningful name (you can leave it to default name if you want to), make sure your subscription name is correct and choose your resource group as the same resource group in which your Azure Cosmos DB is hosted (please refer to  Part 1 of this article to get the name of your resource group if you don't remember it). Choose a location near you or you can leave it to the default location. Click the Create button once you are satisfied with all the settings.

Once the function app is created choose it in the Function Apps window and click the Finish button

In the window that opens next click on Publish button to publish your app on Cloud

If the publish is successful you should be able to see a success message on the screen

Scroll down in the publish window and click on the Site link of your function to make sure its running fine

Step 2 - Add Application Setting to Azure function

Navigate to Azure Portal and click on your Resource group. You should be able to see the Azure function there. If you are having trouble understanding this step please refer to Part 1 of this article series.

Click on the azure function and scroll down to Configuration option on the left side menu

Click on Configuration and we have to add 3 application setting keys here. Click on "+ New Application Setting" and add the keys CosmosDbConnectionString, DatabaseAccountKey and DatabaseEndpoint. To get the value for the keys please visit Azure Cosmos DB and look for Keys in the left menu. If you remember from Part 2 of this article we added some keys and values in local.settings.json file. As the name indicates this file is local and wont be a part of the Publish process. To add those keys and values to your deployed Azure function we have to add them using Application Setting. Once you are done adding, click on Save button.

Step 3 - Test your Azure function

Click on Functions on the left menu of your Function app on the Azure portal.

This will open the functions page for you where you can see all the functions inside your project. 

Click on the Http Trigger function and then Code+Test item on the left menu.

Click on Test/Run on the top menu

A new slider window will open change the request type to Get and click Run

If everything works fine, you should be able to see the results on the output window

You can also test on Postman. For that you will need the Url for your function. You can easily get it by clicking Get Function URL on the top menu item

Once you get the URL copy it and paste it in Postman and click Send.

Summary

At the end of this tutorial, you should be able to publish your Azure function to Azure Cloud, add Application Settings keys, and test your function using Azure Portal built-in Test/Run feature and Postman. In the next article, we will create an Azure SignalR to send live updates to the clients.

Thanks for reading and stay tuned for the next article.

Links for other parts: Part 1, Part 2, Part 4, Part 5, Part 6