Create Your First Windows 10 Universal Apps With Ionic Framework (Walkthrough)

5 Replies

With Ionic 1.2 right around the corner, I decided to take a stab at creating a Universal Windows App using the new version of the framework. Following is my experience configuring what is roughly a clean Windows 10 Pro machine (with VS2015 Update 1 installed.)

First, some prerequisites

  • Windows 10 (I haven’t tried with 8 or 8.1, but I believe these instructions work mostly there as well.)
  • Windows 10 SDK
  • Visual Studio 2015, with “Tools for Universal Windows App Development, Cross Platform Mobile Development > HTML/JavaScript” selected when choosing options.
  • Ionic Framework

Now, the fun stuff

  • Create a new project. We’ll use the tabs template for this example:

  • Navigate into the new project’s directory and check the Ionic version. Because Ionic 1.2 is not yet released (as of the time of this writing,) you should see version 1.1.1:

     

  • Open the project’s directory in Visual Studio (as a website):
    Open Website with Visual Studio
    NOTE: It is not particularly necessary to use VS for this; you could just as easily use Notepad, but I like the source control integration that I have in VS, so this is how I use it (I also create a solution for each app, but that is beyond the scope of what we are doing here.)
  • Edit bower.json (in the root of the site) and change the ionic dependency to be version 1.2.0 (after the #):
    Target Ionic 1.2
  • If you don’t have bower installed, install it first:

     

  • Now, update the project to pull in the Ionic 1.2.0 lib:

  • And confirm that you are now on 1.2.0:

     

  • Now, we’re getting somewhere. Let’s add Windows as a platform:

  • Flipping back to Visual Studio and refreshing the Solution Explorer, we should now see a platforms folder with windows under it. This means it was added correctly. Open the config.xml from the root of the site (NOT the one in the /platforms/windows directory; that one is overwritten when we build.) Add the following before the closing widget tag:

  • Now, we can build the app for windows:

  • Now, if we navigate to the folder specified in the BUILD OUTPUT line (without the filename at the end,) we find this:
    Installation Script
  • Run Add-AppDevPackage.ps1 in an admin PowerShell session, and your app will be installed. The first time you do this, you will need to accept the installation of the dev certificate and enable Windows 10 Developer mode; just follow the instructions, and you should be all set.
  • Now, go to your start menu, and run your new Universal Windows app!

    Run Your App

Closing notes

A Visual Studio .sln file exists in the Windows platform directory as well. In theory, you should be able to open this and debug the app. However, I have yet to be successful in building the app from within VS. Also, after opening it in VS, I can no longer build from the command line. I am working on these issues and will write another post regarding my findings.


I hope this guide helps you get your feet wet in using Ionic for Universal Windows app development! Let me know in the comments if you have any questions or want to share your experiences. Thanks!


EDIT:

I realized after posting this that the app created above doesn’t stay open when running it (the splash screen shows for a moment and then the app closes.) Looking in Windows Event Viewer, I see a generic Windows Javascript error (Event Name: WWAJSE.) Searching the web, this seems to be something that happened quite a bit a few years ago for Windows 8, but there doesn’t appear to be a concrete fix for it. However, I found that the template used a part of the Ioinic keyboard plugin that is somehow not working properly. Removing the hideKeyboardAccessoryBar line in app.js (under the /js folder) fixes this for me. Following is the if block in question, after commenting out this line:

Also, instead of running the .ps1 script mentioned above manually, Ionic can do it for you if you like:

Hope this helps!

5 thoughts on “Create Your First Windows 10 Universal Apps With Ionic Framework (Walkthrough)”

  1. Janez Čadež

    Great tutorial!. That Edit section helped, because my app when first created was crashing at startup.

    Do you have any tutorial or experience with Ionic2 for UWP?

    Reply ↓
  2. krishna sameer

    When I execute: ionic run windows –device –phone
    it says,
    Before installing this app, you need to do the following:

    - Install the signing certificate

    Administrator credentials are required to continue. Please accept the UAC prompt and provide your administrator password if asked.

    Press Enter to continue...: ^CTerminate batch job (Y/N)?

    The prompt to Enter doesn’t respond, and I’m forced to terminate it!
    Any help to execute it on the phone? And, all this while I was trying to deploy it to a windows 10 phone I’ve physically connected.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *


9 × = sixty three

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">