Windows 10 IoT Core - Publish ASP.NET Web Application

Introduction

The purpose of this tutorial is to show how we can publish an asp.net web application to Raspberry Pi running Windows 10 IoT core. We will also retrieve the cpu, i/o and memory usage of the Pi and show it a graph. We will showcase the DNX for ARM on Windows 10 IOT Core.

Components Used

• Power supply to Pi
• SD Card with Windows 10 IoT
• HDMI Cable
• Ethernet/ Wifi Dongle
• Development machine and Pi connected to same network

Software

• Visual Studio 2015
• Visual Studio Code
• Node
• Npm
• Yo
• smoothie.js

Demo

Plugging it all in

Details

Step 1 - Setup your PC and Device  

Please follow the link http://ms-iot.github.io/content/en-US/win10/SetupPCRPI.htm to setup your pc and device.

I used the default Raspberry Pi name for Windows IoT core. It was minwinpc, be sure to replace minwinpc with the name you give when you access the Pi or shared path.

Step 2 - Powershell Configuration

Use powershell to connect and configure your device running Windows 10 IoT core:

http://ms-iot.github.io/content/en-US/win10/samples/PowerShell.htm

Step 3 - Installing the DNX for Windows ARM

Raspberry Pi 2 is an ARM device so we need the version of DNX compiled for ARM. We can use dnvm to install dnx for ARM in our development machine and later package and publish it to Raspberry Pi.

I will be using the beta7 version of the dnx. We need to enable the unstable feed to download and install the dnx runtimes. To set the unstable feed, from the powershell issue this command.

$env:DNX_UNSTABLE_FEED = "https://www.myget.org/F/aspnetmaster"

To download and install the dnx, issue these commands from the powershell of your development machine. Later, we can package the application for arm and deploy it in the Pi.

 dnvm upgrade

dnvm update-self

dnvm install 1.0.0-beta7 -r coreclr -arch ARM -u

dnvm install 1.0.0-beta7 -r coreclr -arch x86 -u

dnvm install 1.0.0-beta7 -r coreclr -arch x64 -u  

dnvm install 1.0.0-beta7 -r clr -arch x86 -u  

dnvm install 1.0.0-beta7 -r clr -arch x64 -u  

To see the list of all the runtimes installed in your development machine, issue this command from the powershell

dnvm list

Step 4 - Creating the DNX application

I will be using npm and yeoman to setup a startup application. To use npm, you must first install node.

Download and install node: https://nodejs.org/en/

You can create a new project from visual studio or use npm to install the yoeman package to scaffold a default web application for Pi, to install yo and generator-aspnet, issue this command from the powershell of your development machine:

npm install -g yo generator-aspnet
yo aspnet 

Select Web Application Basic (Without Membership and Authorization).

This will scaffold a web application for you. Navigate to the root for your web application from the powershell and issue these commands to restore the nuget packages

dnvm use -v 1.0.0-beta7
dnu restore
dnx web  

To make sure that the application runs in our development system, lets browse the localhost at the port 5000 via web browser.

http://localhost:5000

You should see the default asp.net web application up and running in our development machine.

Step 5 - Setup ASP.NET MVC Conroller and View

I am not going to get in detail on asp.net mvc. The purpose here is to show how to get the CPU, I/O and memory data from Pi and display it in a chart. The completed project is available in the github, feel free to download and modify.

I created an asp.net mvc controller called PiController. This controller has only one action method called Index. If we browse our application using the url http://localhost:5000/Pi, it returns the default view called Index.

  namespace DnxPi.Controllers
{
    public class PiController : Controller
    {
	public IActionResult Index()
        {
            return View();
        }
    }
}  

The index.cshtml contains reference to javascript file named SystemPerformance.js. This file is taken from the default web application of the Pi which runs at port 8080. This javascript along with smoothie.js was used to generate a nice chart which displays the CPU, I/O and Memory Usage of the Pi. Please refer the code sample attached to github for further details.

Step 6 - Publishing  the DNX application

To publish the web application for DNX arm beta, issue the command from the development machine. This will package your web application for DNX arm which is the main purpose of this project.

dnu publish --out C:\publish\DnxPi --no-source --runtime dnx-coreclr-win-arm.1.0.0-beta7  

Navigate to the published folder and open the hosting.ini file and change the URL the application listens on to match all host names: 

server.urls=http://*:5000

In my system hosting.ini was available at C:\publish\DnxPi\approot\packages\DnxPi\1.0.0\root, Please copy the contents available at C:\publish\DnxPi to UNC shared path of the Pi which in my case it was \\minwinpc\c$\PROGRAMS

Note: Must replace minwinpc with your Pi's IP address or name

Step 7 - Opening a port in the firewall of the Pi 

The port 5000 should be available to listen from other computers in your network. To open the the port in the Raspberry Pi from powershell, first connect to your Raspberry Pi using the command Enter-PsSession:

Enter-PsSession -ComputerName minwinpc -Credential minwinpc\Administrator

You will be prompted to enter your Raspberry Pi password. Type the password and connect to Pi. After connecting to Raspberry Pi (minwinpc), issue this command to open the firewall port at 5000 on the Pi:

netsh advfirewall firewall add rule name="DNX Web Server port" dir=in action=allow protocol=TCP localport=5000 

Step 8 - Start the web app

Use the same powershell session established to connect the Pi to start the web application on port 5000. Navigate to the folder where the application was copied. This can be done using Set-Location in the powershell:

Set-Location C:\PROGRAMS\DnxPi

The web application is configured to listen on port 5000. Issue the command from the powershell session which is connected to your Raspberry Pi. The DNX web will start the web application:

dnx web

After few seconds, it should say the application started. This means our web application is now up and running on the Pi and we can browse using the machine name or IP address on the port 5000

Step 9 - Browse

The published asp.net web application in the Raspberry Pi can be accessed through our browser in the development computer using the Raspberry Pi's machine name or IP address on the port 5000 like this.

http://minwinpc:5000

You should now see the application served from your Pi:

Step 10 - Raspberry Pi Statistics

I have setup a MVC controller and View to see the CPU, I/O and memory usage of the Pi. You can download it in the software section.

We use web socket to access the resource API from the Pi. So the default app at http:\\minwinpc:8080 should be started and authenticated using your Pi's Admin account to see the CPU, i/o and memory details from our app.

The same information is also available @ http://minwinpc:8080/SystemPerformance.htm

I just converted it to asp.net5 controller/View. Navigate to http://minwinpc:5000/pi to see the statistics in nice little graph.

Reference

https://github.com/DamianEdwards/PiDnx

Conclusion

Dnx for ARM is still in beta. It is possible that in some cases it might not work. Also, DNX for ARM is in very early stage, expect frequent crashes, server not responsive etc. Do not use this for production purpose.