Displaying Temperature Data with Microsoft Azure* Web Apps

Now that we have our device message data being stored in our Microsoft Azure* SQL Database, let's use a web application to display that data!

We'll start by creating the Azure App Service Plan and Web App in the portal.

Setup the Web App in Microsoft Azure*

1. Open the Azure Portal (https://portal.azure.com) in the browser. and close any open blades from previous steps. Then click + New > Web + mobile > Web App

2. In the Web App blade fill the properties out as follows, but don't click Create yet! We need to configure the App Service Plan First.

  • App name - <name>web
  • Subscription - Chose the same subscription used for the previous resources
  • Resource group - Choose Use existing and select the <name>group resource group created previously
  • App Insights - Off

3. Click on the App Service plan/location then click Create New.

4. Then in the App Service plan blade complete the properties as follows, then click OK.

  • App service plan - <name>plan
  • Location - Use the same location as the previous resources
  • Pricing tier - Select B1 Basic

5. Finally, ensure that the Pin to dashboard checkbox is checked and click the Create button:

6. Once the Web App is deployed, its blade will open in the portal. When it does, click the Deployment options button along the left, then click Choose Source and then select Local Git Repository:

7.  If you haven't setup your deployment credentials for your account subscription yet, you'll need to. Click Setup connection and enter the credentials to use, and click OK:

Note: If you are not prompted for your deployment credentials, then you have likely already set them for your subscription in the past. You can go ahead and finish creating the deployment source, the after you have created it, use the Deployment Credentials link along the left side of your Web App blade to get to the same settings shown here.

  • Deployment user name - <name>user
  • Password - P@ssw0rd
  • Confirm Password - P@ssw0rd

8. Then back on the Deployment source blade click OK to confirm the settings:

9. Click the Overview link along the left, hover of the Git clone url, the click the copy icon that appears to copy it to your clipboard.

10. Finally, document all the settings for your web app in the myresources.txt file.

Debug the Node.js* Web Application Locally


The reason for this is that we are going to be using the Node.js* Debugging and Git* Integration capabilities of Visual Studio Code in this task to help us debug and deploy our Node.js Web Application. These are awesome features built-in to Visual Studio Code, but they require that the root folder code is pointing at is both the root the application you wish to debug as well as the root of the git repository you want to manage. For that reason, we need to open the HOLs/WebApp folder directly in Visual Studio Code for these steps to work.

1. Open a new instance of Visual Studio Code. If you already have Visual Studio Code open, from the menu bar, select File > New Window.

2. From the menu bar in the new instance select File > Open Folder... and find the HOLs\WebApp folder under where you extracted the lab files. Then inside that folder in VS Code, select the config.json file.

3. Use the values you've saved to the myresources.txt (the myresources.txt file should still be accessible in the original instance of visual studio code) to paste the required values into the config.json file. You can close the config.json when you are done. IGNORE THE POWERBI... SETTINGS. WE'LL GET TO THOSE LATER

Note: The IotHubConnString should be the one for your service SAS policy, that's the one with SharedAccessKeyName=service in it. This web app doesn't manage your iot devices, it just communicates with them as a back end service and the service Shared Access Policy on our IoT Hub gives the web app all the permissions it needs. Additionally, the sqlLogin is just the Azure SQL Server Login, NOT the Qualified SQL Login (e.g. use sqladmin, not sqladmin@mic16sql).

4. Next, click on the Debug icon along the left, then click the gear icon along the top to configure the debugger:

5. When prompted, select Node.js as the environment

Note: If you are see an option for the Node.js v6.3+ (Experimental) DO NOT select it.

6. In the launch.json file that appears, modify the program path to point to the server.js file. Then save and close the launch.json file.

Note: This tells the debugger to start with the server.js file in the root of our web application's folder.

7. In Open a command prompt or terminal window, and change into the HOLs\WebApp path. From there, run the following commands:

Note: Bower requires that git is installed and configured. Refer to the Prerequisites section for installation links and configuration steps.

npm install -g bower
npm install

8. Back in VS Code, on the Debug panel, click the green play button along the top to start debugging the web app.

9. On Windows, you may be prompted to verify the firewall configuration. If so, select all networks, and click Allow access:

10. In the Debug Console (if your's isn't visible press Ctrl+Shift+Y), you should see that the app is running on http://localhost:3000

11. In your browser, navigate to http://localhost:3000. There are three main sections on the web page

  • The Temperature History shows the 20 most recent readings. That data is coming directly from the Azure SQL Database's dbo.RecentMeasurements view
  • The Devices area displays a row for each device along with their latest sensor values. That data comes from the Azure SQL Databases' dbo.Devices view.
  • The Chart section currently has a placeholder image promising that a chart is coming soon. If you complete the TIME PERMITTING - Display Temperature Data with Power BI Embedded portion of the lab, you will make good on that promise.

12. You can stop the debug session by pressing the red square or stop button the debug toolbar in Visual Studio Code:

Deploying the Web App to Microsoft Azure*

The last step is to get this web application running in Azure, not locally. Earlier, when we configured the Web Application we set it up to deploy from a git repository. To deploy we can simply push our web app code via git up to the Web App's repo. Visual Studio Code makes that simple to do!.

1. n Visual Studio Code, click the git icon to open the git panel, and then click the Initialize git repository button.

2. Type in a message (like Initial commit) in the box at the top, and click the checkmark commit icon to commit the changes to the new repo. Make sure to click the checkmark commit icon to commit or you will receive errors when you try to push to remote repo in Azure in the next step.

3. Refer to the Azure Web App Resources information you recently save in the myresources.txt file. Copy the Git Clone URL value to your clipboard. Next, open a command prompt or terminal window, navigate to the HOLs\WebApp directory. and issue the following command at the prompt:


git remote add origin <your git clone ul>>

for example:

git remote add origin https://mic16user@mic16web.scm.azurewebsites.net:443/mic16web.git

4. Then, back in Visual Studio Code, on the git panel, click the ... ellipsis menu at the top, then select Publish, and confirm the publish when prompted.

Note: If you receive an error: src refspec master does not match any. in the Visual Studio Code Output window it is likely because you forgot to commit two steps ago. Make sure to click the checkmark commit icon on the VS Code Git panel to commit as documented above.

5. When prompted, enter the deployment credentials you configured previously (these should also be copied down in your myresources file) and click OK to authenticate:

6. In the Azure Portal (https://portal.azure.com), on the Deployment options page for your <name>web web app, you should see the deployment kick off. The deployment will likely take a few minutes. Wait until it displays the green checkmark, and Active.

7. And finally, you should be able to open your site in Azure to verify it is working. Note: The URL to your site in Azure should be http://*name*web.azurewebsites.net. For example http://mic16web.azurewebsites.net. You should have also documented this in your myresources.txt file.

IDE or Development Framework: 
For more complete information about compiler optimizations, see our Optimization Notice.