Visualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

End-to-end diagram

Note

Before you start this tutorial, set up your device. In the article, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. The application sends collected sensor data to your IoT hub.

What you learn

In this tutorial, you learn how to visualize real-time sensor data that your IoT hub receives by running a web application that is hosted on a web app. If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

What you do

  • Create a web app in the Azure portal.
  • Get your IoT hub ready for data access by adding a consumer group.
  • Configure the web app to read sensor data from your IoT hub.
  • Upload a web application to be hosted by the web app.
  • Open the web app to see real-time temperature and humidity data from your IoT hub.

What you need

  • Set up your device, which covers the following requirements:

    • An active Azure subscription
    • An Iot hub under your subscription
    • A client application that sends messages to your Iot hub
  • Download Git

Create a web app

  1. In the Azure portal, click Create a resource > Web + Mobile > Web App.

  2. Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.

    We recommend that you select the same location as your resource group.

    Create a web app

Add a consumer group to your IoT hub

Consumer groups are used by applications to pull data from Azure IoT Hub. In this tutorial, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

To add a consumer group to your IoT hub, follow these steps:

  1. In the Azure portal, open your IoT hub.

  2. In the left pane, click Endpoints, select Events on the middle pane, enter a name under Consumer groups on the right pane, and then click Save.

    Create a consumer group in your IoT hub

Configure the web app to read data from your IoT hub

  1. Open the web app you’ve just provisioned.

  2. Click Application settings, and then, under App settings, add the following key/value pairs:

    Key Value
    Azure.IoT.IoTHub.ConnectionString Obtained from Azure CLI
    Azure.IoT.IoTHub.ConsumerGroup The name of the consumer group that you add to your IoT hub
    WEBSITE_NODE_DEFAULT_VERSION 8.9.4

    Add settings to your web app with key/value pairs

  3. Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Toggle the Web sockets option

Upload a web application to be hosted by the web app

On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. All you need to do is configure the web app to work with a Git repository, download the web application from GitHub, and then upload it to Azure for the web app to host.

  1. In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    Configure your web app deployment to use the local Git repository

  2. Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. Click Overview, and note the value of Git clone url.

    Get the Git clone URL of your web app

  4. Open a command or terminal window on your local computer.

  5. Download the web app from GitHub, and upload it to Azure for the web app to host. To do so, run the following commands:

    git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
    cd web-apps-node-iot-hub-data-visualization
    git remote add webapp <Git clone URL>
    git push webapp master:master
    

    Note

    <Git clone URL> is the URL of the Git repository found on the Overview page of the web app.

Open the web app to see real-time temperature and humidity data from your IoT hub

On the Overview page of your web app, click the URL to open the web app.

Get the URL of your web app

You should see the real-time temperature and humidity data from your IoT hub.

Web app page showing real-time temperature and humidity

Note

Ensure the sample application is running on your device. If not, you will get a blank chart, you can refer to the tutorials under Setup your device.

Next steps

You've successfully used your web app to visualize real-time sensor data from your IoT hub.

For an alternative way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

To continue to get started with Azure IoT Hub and to explore other IoT scenarios, see the following: