Convert Web Application To Universal Windows Platform App In Visual Studio 2017

In this article, we are going to talk about Hosted Web app in Universal Windows Platform. We will convert a web application into a UWP app in just few minutes, using the brand new Visual Studio 2017.

It is recommended to develop hosted web apps of your websites only. If you are not the owner of the site, then you do not have any right to convert that web application to a Universal Windows Platform app.

In this tutorial, I will use my blog site to convert it in a Universal Windows Platform app in few steps.


Figure 1 - My blog site

Now, let's create a new project in Visual Studio 2017. Click on File >> New Project.


Figure 2 - Create new project

Now, select Blank APP (Universal Windows) in Windows Universal section of JavaScript templates. This is a project for a Universal Windows app that has no predefined controls or layouts, and it has direct access to all Universal Windows APIs.


Figure 3 - Project template selection

Next, you need to select target and minimum platform versions of your UWP application.

Here, I have selected Windows 10 Anniversary Edition as target version and Windows 10 as minimum version.


Figure 4 - Target version selection

Now, from the Solution Explorer, you can see that the project files are ready. There are CSS folder, images, JS, index page, and a few other files. As you are not going to use any local resource and load web page in your application, so you don’t need CSS or JS folder and index.html page.


Figure 5 - Solution Explorer

As we are not using any local resources, we have just deleted CSS folder, JS folder, and index.html.


Figure 6 - Solution explorer after deleting files.

Open package.appmanifest file. Here, you can see that index.html is listed as start page of the application. You will use your own website link here.


Figure 7 - Package.AppManifest page

Here, I have replaced index.html page with my web application address as the starting page of my UWP app.


Figure 8 - package.appmanifest page after modification

Now, go to "Capabilities" tab to check whether the Internet (client) capability is checked or not. Usually, it is checked by default.


Figure 9 - Capabilities tab of package.appmanifest page

Now, open the "Content URIs" tab. We will use this page to specify which URIs can be navigated by an iframe in our app and which URIs, when loaded in a WebView, can use window.external.notify functionality to send a ScriptNotify event to the app. I will use my blog site address as the URI and select include as Rule and None as WinRT Access.


Figure 10 - Content URIs tab

Now, let's run the app. It will take a few seconds to build and run it. We are running the app using local machine option. Once it is run, we will see our Hosted Universal Windows Platform app. 


Figure 11 - Hosted Universal Windows Platform app

We can launch this app in Windows Marketplace as well.