Deploying to Raspberry Pi 2 with Visual Studio 2015

The following tutorial will teach you how to quickly create a hosted web app and deploy it to a Raspberry Pi 2 using Visual Studio (VS). This is now possible thanks to the Windows Internet of Things (IoT) core and project Westminister. By the end of this tutorial, you will have succesfully converted your website into a Universal Windows Platform (UWP) application that can run on the Raspberry Pi and even communicate with sensors!

Step 1: Pick a website URL

Choose an existing website that will work great as a single-page app. We highly recommend that you are the owner or developer of the site; this way you will be able to make all the necessary changes.

If you do not have a URL in mind, we will be walking you through using this Codepen example as the website. The codepen allows you to control the Pi's on-board LED.

Copy your URL, or the Codepen URL, to use throughout the tutorial.

Step 2: Create a blank JavaScript app

Launch Visual Studio 2015.

Click File.
Click New Project.
Under JavaScript then Windows Universal, click Blank App (Windows Universal).

Step 3: Delete any packaged code

Since this is a hosted web app, where the content is served from a remote server, you will not need most of the local app files that come with the JavaScript template by default.

Delete any local HTML, JavaScript, or CSS resources. All that should remain is the package.appxmanifest file, where you configure the app, and the image resources.

Step 4: Set the start page URL

Open the package.appxmanifest file.
Under the Application tab, find the Start page text field.
Replace default.html with your website URL.

Step 5: Define the boundaries of your web app

Application Content URI Rules (ACURs) specify which remote URLs are allowed access to your app and to the Universal Windows APIs. At the very minimum, you will need to add an ACUR for your start page and any web resources utilized by that page. For more information on ACURs, click here.

Open the package.appxmanifest file.
Click the Content URIs tab.
Add any necessary URIs for your start page.

For example:

1. http://codepen.io/

2. http://*.codepen.io/
Set the WinRT Access to All for each URI you added.

Step 6: Run your app

At this point, you have a fully functioning Windows 10 app capable of accessing the Universal Windows APIs!

Step 7: Hook up your board

Make sure the Micro SD card is inserted into your Raspberry Pi 2
Connect a network cable from your local network to the Ethernet port on the board or use the WiFi dongle to connect to WiFi. Make sure your development PC is on the same network.
Connect an HDMI monitor to the HDMI port on the board.
Connect the power supply to the micro USB port on the board.

Step 8: Boot Windows 10 IoT Core

Windows 10 IoT Core will boot automatically after connecting the power supply. This process will take a few minutes. After seeing the Windows logo, your screen may go black for about a minute - don't worry, this is normal for boot up.

Once the device has booted, the DefaultApp will launch. Click on device information on the top left. This will display the IP address of your RPi2. Take note of the IP address you will need it later.

Step 9: Set up remote connection settings

At this point, Visual Studio will present the Remote Connections dialog. If you previously used Powershell to set a unique name for your device, you can enter it here (in this example, we're using my-device). Otherwise, use the IP address of your Windows IoT Core device. After entering the device name/IP select Universal (Unencrypted Protocol) Authentication Mode, then click Select.

You can verify or modify these values by navigating to the project properties (select Properties in the Solution Explorer) and choosing the Debug tab on the left.

Step 10: Deploy

Now we’re ready to deploy. Simply press F5 (or select Debug | Start Debugging) to start debugging your app. You should see the app come up in Windows IoT Core device screen.
Once deployed, you can set breakpoints, see variable values, etc. To stop the app, press on the ‘Stop Debugging’ button (or select Debug | Stop Debugging).