Build a Serverless Status Page with Azure Functions, SignalR, and Static HTML
Tags: azure, serverless, webdev, node
Published: 2019-12-09 15:21:46

---
title: Build a Serverless Status Page with Azure Functions, SignalR, and Static HTML
published: true
description: 25 Days of Serverless Challenge 8 - Santa and his team need a status page solution to communicate issues to a broader audience.
cover_image: https://jhandcdn.blob.core.windows.net/blob/osman-rana-u5m61CHska4-unsplash.jpg
tags: #azure, #serverless, #webdev, #node
---

This article is part of [#25DaysOfServerless](http://aka.ms/25daysofserverless). New challenges will be published every day from Microsoft Cloud Advocates throughout the month of December. Find out more about how Microsoft Azure enables your [Serverless functions](https://docs.microsoft.com/azure/azure-functions/?WT.mc_id=25days_devto-blog-cxa).

---

### Day 8 of the #25DaysOfServerless Challenge

An evil grinch has stolen all the servers in the world and we have to visit many countries and situations to set things right!

... 

Today we find ourselves visiting the North Pole at the head of global gift giving operations, Santa's workshop! 

Tech doesn't always work perfect. Incidents and outages happen - even for Santa Claus. If something is wrong, we need a method to communicate the current status of service disruptions to a global audience. A "Status Page" solution.

Santa and his team need a way to report the status of service disruptions to everyone involved in a successful Christmas morning. A simplified version behind what you'll see at [status.azure.com](https://status.azure.com) where the status of many services are broadcast.

For simplicity, we want to be able to inform others by setting (and broadcasting) the current "Status" of a system (Reindeer Guidance & Delivery) to any one of the following information updates: 

* **We have a problem** (Service Disruption / Offline)
* **Our problem is resolved** (Service Restored / Online)
* **Still investigating** (Standby for more updates)

We'll also display a log of all updates as they came through. That way people can easily catch up on what has transpired.

![Reindeer2](https://jhandcdn.blob.core.windows.net/blob/reindeer3.gif)
>Image credit: [Caro Ramsey](https://twitter.com/caroramsey)

---

## Solution

We can solve this with an [Azure Function](https://azure.microsoft.com/services/functions/?WT.mc_id=25daysofserverless-devto-cxa), combined with a [static HTML website](https://azure.microsoft.com/services/storage/?WT.mc_id=25daysofserverless-devto-cxa), an outgoing webhook, and [SignalR](https://azure.microsoft.com/services/signalr-service/?WT.mc_id=25daysofserverless-github-cxa) to automatically refresh/reload the browser.

### Tech Used

The brains behind this solution is an [Azure Function (running Node.js)](https://github.com/jasonhand/teams-incident-status-page-bot/tree/master/src/functions-javascript) that is triggered via [outgoing webhook (from Microsoft Teams)](https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-outgoing-webhook/?WT.mc_id=25daysofserverless-devto-cxa). 

The function modifies an index.html file stored in a "web server" served from a serverless SMB file share in Azure Storage.

Users can `open`, `update`, and `close` "status updates" by invoking them from within a chat channel.

In addition to the website files, an [Azure Table](https://docs.microsoft.com/en-us/azure/cosmos-db/table-storage-overview/?WT.mc_id=25daysofserverless-devto-cxa) will be used for storing the history of each status update.

[SignalR](https://docs.microsoft.com/azure/azure-signalr/signalr-overview/?WT.mc_id=25daysofserverless-devto-cxa) manages refreshing the client so that changes made to the HTML are immediately visible without any end user interaction.

Application Insights is used to provide observability on the operation, behavior, and usage of the solution and is "best practice" for building highly available and reliable system... which we expect from any Status Page solution.

![](https://github.com/jasonhand/teams-incident-status-page-bot/raw/master/img/ReindeerStatusScreenshot.png)

![Reindeer](https://jhandcdn.blob.core.windows.net/blob/reindeer.gif)
>Image credit: [Caro Ramsey](https://twitter.com/caroramsey)

([Click here to see it in action](https://jhandcdn.blob.core.windows.net/blob/UpdateFromTeams.gif))

### Prerequisites

You will need an account with the following services: 

- [Microsoft Azure](https://azure.microsoft.com/?WT.mc_id=25daysofserverless-devto-cxa)
- [Microsoft Teams](https://docs.microsoft.com/en-us/MicrosoftTeams/teams-overview/?WT.mc_id=25daysofserverless-devto-cxa)

---

### Deployment Instructions

**1.** [Check out my solution on Github](https://github.com/jasonhand/teams-incident-status-page-bot), including a "Deploy to Azure" button so you can immediately dive in with a working deployment. All you need is a free Azure account.

The blue button deploys all resources needed for this solution in to the Resource Group and Azure region of your choice. The name you choose also determines the URL used to view the Status Page as well as the incoming URL used to trigger updates. Once the deployment is complete, continue with step 2.

---

**2.** In the Azure portal, open the Storage account and add a table named `statuses`. You do not need to set any properties or add records.

![Create table](https://jhandcdn.blob.core.windows.net/blob/CreateStatusesTable.gif)

---

**3.** Navigate to the function app, and open the `teams-webhook` function. Click "Get Function URL" and copy the URL. 


**4.**Open the URL of the Function in a new tab. This is "Status Page" that will change automatically when updated. It is NOT the same as the "Get Function URL" used in the next step.

![](https://jhandcdn.blob.core.windows.net/blob/ReindeerGuidanceSystemURL.png)

---

**5.** Open Microsoft Teams and navigate to the "Apps" page of the team in which you want to create the bot. Click "Create outgoing webhook".

- Use `StatusPage` as the bot name (this is hardcoded, for now). 
- Paste in the function URL, and enter a description and press the create button.

> You will be prompted with a secret code for validating webhook calls from Teams. We currently do not use this. Close the dialog box.

[![](https://jhandcdn.blob.core.windows.net/blob/WebhookStatic.png)](https://jhandcdn.blob.core.windows.net/blob/Webhook.gif)

**6.** In Microsoft Teams, update the status page by typing `@StatusPage` to summon the bot followed by `open We are experiencing a problem. Standby for more information`

Available commands are:

```bot
        @StatusPage open [message]
        @StatusPage update [message]
        @StatusPage close [message]
        @StatusPage help`
```

---

This solution is based on the on-stage demonstrations built for Microsoft Ignite The Tour.

To learn more about the full demonstration, view the repo for "[OPS20 - Responding To Incidents](https://myignite.techcommunity.microsoft.com/sessions/82997/?WT.mc_id=25daysofserverless-devto-cxa)". Huge Thanks to [Anthony Chu](https://github.com/anthonychu) in bringing this to life.

![Reindeer2](https://jhandcdn.blob.core.windows.net/blob/reindeer2.gif)
>Image credit: [Caro Ramsey](https://twitter.com/caroramsey)


What other ways could you solve this? Add your solutions in the comments below!

Want to submit your own solution to this challenge? 

Once you have a solution [submit it as an issue](https://github.com/microsoft/25-days-of-serverless/issues/new?assignees=&labels=challenge-submission&template=challenge-solution-submission.md&title=%5BCHALLENGE+SUBMISSION%5D+). 

If your solution doesn't involve code or repository to review, please record a short video and submit it as a link in the issue description. Make sure to tell us which challenge the solution is for. 

We're excited to see what you build! Do you have comments or questions? Add them to the comments area below.

Watch for surprises all during December as we celebrate 25 Days of Serverless. Stay tuned here on dev.to as we feature challenges and solutions! [Sign up for a free account on Azure](https://azure.microsoft.com/free/?WT.mc_id=25days_devto-blog-cxa) to get ready for the challenges!