Document Details
Iot Hub Live Data Visualization In Web Apps
❌
This page contains Windows bias
About This Page
This page is part of the Azure documentation. It contains code examples and configuration instructions for working with Azure services.
Bias Analysis
Bias Types:
⚠️
windows_first
⚠️
missing_linux_example
Summary:
The documentation assumes a Windows development environment throughout, with all command-line examples (such as setting environment variables and running commands) given in Windows CMD syntax only. There are no Linux or macOS shell equivalents provided for setting environment variables or running the app, despite a brief mention that the steps can be performed on Linux. This creates a Windows-first bias and leaves Linux users without clear guidance for key steps.
Recommendations:
- For every command-line example (e.g., setting environment variables, running npm commands, git commands), provide both Windows CMD and Linux/macOS shell (bash) equivalents, either side-by-side or in clearly marked tabs/sections.
- In the prerequisites, explicitly mention that the tutorial is cross-platform and provide links or notes for installing Node.js and Git on Linux/macOS.
- When referencing file navigation or editors, avoid Windows-specific terminology or provide Linux/macOS alternatives (e.g., mention 'your terminal' instead of 'command window').
- In the App Service section, clarify how to deploy to both Windows and Linux App Service plans, and provide Linux-specific az CLI examples where relevant.
- Add troubleshooting tips for common Linux/macOS issues (e.g., permissions, environment variable syntax, npm differences).
Create pull request
Scan History
| Date | Scan ID | Status | Bias Status |
|---|---|---|---|
| 2025-08-17 00:01 | #83 | in_progress | ✅ Clean |
| 2025-07-13 21:37 | #48 | completed | ❌ Biased |
| 2025-07-12 23:44 | #41 | in_progress | ❌ Biased |
| 2025-07-09 13:09 | #3 | cancelled | ✅ Clean |
| 2025-07-08 04:23 | #2 | cancelled | ❌ Biased |
Flagged Code Snippets
3. You should see output in the console that indicates that the web app successfully connected to your IoT hub and is listening on port 3000:
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-console-start.png" alt-text="Screenshot showing the web app sample successfully running in the console.":::
## Open a web page to see data from your IoT hub
Open a browser to `http://localhost:3000`.
In the **Select a device** list, select your device to see a running plot of the last 50 temperature and humidity data points sent by the device to your IoT hub.
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-page-output.png" alt-text="Screenshot of the web app running on localhost, showing real-time temperature and humidity.":::
You should also see output in the console that shows the messages that your web app is broadcasting to the browser client:
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-console-broadcast.png" alt-text="Screenshot of the web app output on console.":::
## Host the web app in App Service
The [Azure App Service](../app-service/overview.md) provides a platform as a service (PAAS) for hosting web applications. Web applications hosted in App Service can benefit from Azure features like security, load balancing, and scalability. Web applications can also benefit from Azure and partner DevOps solutions like continuous deployment, package management, and so on. App Service supports web applications developed in many popular languages and deployed on Windows or Linux infrastructure.
In this section, you provision a web app in App Service and deploy your code to it by using Azure CLI commands. You can find details of the commands used in the [az webapp](/cli/azure/webapp) documentation.
1. An [App Service plan](../app-service/overview-hosting-plans.md) defines a set of compute resources for an app hosted in App Service to run. In this tutorial, we use the Developer/Free tier to host the web app. With the Free tier, your web app runs on shared Windows resources with other App Service apps, including apps of other customers. Azure also offers App Service plans to deploy web apps on Linux compute resources. You can skip this step if you already have an App Service plan that you want to use.
To create an App Service plan using the Windows free tier, use the [az appservice plan create](/cli/azure/appservice/plan#az-appservice-plan-create) command. Use the same resource group your IoT hub is in. Your service plan name can contain upper and lower case letters, numbers, and hyphens.
Note down the service connection string, you need it later in this tutorial.
[!INCLUDE [iot-authentication-service-connection-string.md](../../includes/iot-authentication-service-connection-string.md)]
## Download the web app from GitHub
Download or clone the web app sample from GitHub: [web-apps-node-iot-hub-data-visualization](https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git).
## Examine the web app code
On your development machine, navigate to the **web-apps-node-iot-hub-data-visualization** directory, then open the web app in your favorite editor. The following shows the file structure viewed in Visual Studio Code:
:::image type="content" source="./media/iot-hub-live-data-visualization-in-web-apps/web-app-files.png" alt-text="Screenshot that shows the web app file structure, with four files highlighted.":::
Take a moment to examine the following files:
* **server.js** is a service-side script that initializes the web socket and the Event Hubs wrapper class. It provides a callback to the Event Hubs wrapper class that the class uses to broadcast incoming messages to the web socket.
* **scripts/event-hub-reader.js** is a service-side script that connects to the IoT hub's built-in endpoint using the specified connection string and consumer group. It extracts the DeviceId and EnqueuedTimeUtc from metadata on incoming messages and then relays the message using the callback method registered by server.js.
* **public/js/chart-device-data.js** is a client-side script that listens on the web socket, keeps track of each DeviceId, and stores the last 50 points of incoming data for each device. It then binds the selected device data to the chart object.
* **public/index.html** handles the UI layout for the web page and references the necessary scripts for client-side logic.
## Configure environment variables for the web app
To read data from your IoT hub, the web app needs your IoT hub's connection string and the name of the consumer group that it should read through. It gets these strings from the process environment in the following lines in server.js:
:::code language="javascript" source="~/web-apps-node-iot-hub-data-visualization/server.js" range="7-20" highlight="1,8":::
Set the environment variables in your command window with the following commands. Replace the placeholder values with the service connection string for your IoT hub and the name of the consumer group you created previously. Don't quote the strings.