Creating a Windows Universal App from your existing Web Sites using Visual Studio 2015

This post talks about –  How to create a Windows Universal app from an existing web sites ?. If you already have a web site running and you want create an APP for it, then you can create a windows universal app in just by performing following  four steps.

Step 1: Create a Windows Universal App Project in Visual Studio

Open Visual Studio and Select File -> New -> Project and Select Blank App (Windows Universal)under “JavaScript -> Windows -> Windows Universal” templates.

Step 2: Organize the folders and Files for Universal App

Once the project is loaded, the initial solution structure looks like as following image . Delete the CSS, js, WinJS and default.html files from the project.

Now you are left only with the images folder and appxmanifest file.

Step 3: Configure the Manifest File

Open the package.appxmanifest file

Search for StartPage=”default.html” and then remove the default.html and set the URL for which you are planned to create the universal app.

For example: Let’s select  URL “https://dailydotnettips.com/“.

Add the Application Content URI Rules to the package manifest. This setting defines the URL that are part of the app. If the URL is not defined in this rule then they will open in the default browse

Set the WindowsRuntimeAccess to all, so that the URL can use access the native platform API’s.
(If you have more than one subdomain, you must use one wildcard for each subdomain)

<Applications> 
<Application Id="App" StartPage="https://dailydotnettips.com/"> 
<uap:ApplicationContentUriRules> 
<uap:Rule Match="https://dailydotnettips.com/" Type="include" WindowsRuntimeAccess="all"/> 
</uap:ApplicationContentUriRules> 
<uap:VisualElements DisplayName="UniversalWindowsApp" Description="UniversalWindowsApp" BackgroundColor="#464646" Square150x150Logo="images\Logo.png" Square44x44Logo="images\SmallLogo.png"> 
<uap:SplashScreen Image="images\splashscreen.png" /> 
</uap:VisualElements> 
</Application> 
</Applications>

Step 4:  Run the Application

Press F5 and run the app.

Now you have created a Universal Windows App from Web Site.

Advantage of using this Web  sites in Universal Windows Apps are:

1. Integrate Cortana.

2. Add Live Tiles.

3. Add Toast Notifications to the Application.

4. In-App Purchase from Windows Store.

Hope this post would have helped you in Creating Universal Windows App from your existing web sites.