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:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152S:\Dev\Ionic>ionic start WindowsSample tabsCreating Ionic app in folder S:\Dev\Ionic\WindowsSample based on tabs projectDownloading: https://github.com/driftyco/ionic-app-base/archive/master.zip[=============================] 100% 0.0sDownloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip[=============================] 100% 0.0sUpdated the hooks directory to have execute permissionsUpdate Config.xmlInitializing cordova projectYour Ionic project is ready to go! Some quick tips:* cd into your project: $ cd WindowsSample* Setup this project to use Sass: ionic setup sass* Develop in the browser with live reload: ionic serve* Add a platform (ios or Android): ionic platform add ios [android]Note: iOS development requires OS X currentlySee the Android Platform Guide for full Android installation instructions:https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html* Build your app: ionic build* Simulate your app: ionic emulate* Run your app on a device: ionic run* Package an app using Ionic package service: ionic packageFor more help use ionic --help or ionic docsVisit the Ionic docs: http://ionicframework.com/docsCreate an ionic.io account to send Push Notifications and use the Ionic View app?(Y/n): n+---------------------------------------------------------++ New Ionic Updates for December 2015++ The View App just landed. Preview your apps on any device+ http://view.ionic.io++ Invite anyone to preview and test your app+ ionic share EMAIL++ Generate splash screens and icons with ionic resource+ http://ionicframework.com/blog/automating-icons-and-splash-screens/++---------------------------------------------------------+S:\Dev\Ionic>
- 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:
12345678S:\Dev\Ionic>cd WindowsSampleS:\Dev\Ionic\WindowsSample>ionic libLocal Ionic version: 1.1.1 (S:\Dev\Ionic\WindowsSample\www\lib\ionic\version.json)Latest Ionic version: 1.1.1 (released 2015-11-05)* Local version up to dateS:\Dev\Ionic\WindowsSample>
- Open the project’s directory in Visual Studio (as a website):
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 #):
- If you don’t have bower installed, install it first:
1S:\Dev\Ionic\WindowsSample>npm install -g bower
- Now, update the project to pull in the Ionic 1.2.0 lib:
1S:\Dev\Ionic\WindowsSample>bower install
- And confirm that you are now on 1.2.0:
123456S:\Dev\Ionic\WindowsSample>ionic libLocal Ionic version: 1.2.0-nightly-1823 (S:\Dev\Ionic\WindowsSample\www\lib\ionic\bower.json)Latest Ionic version: 1.1.1 (released 2015-11-05)* Local version is out of dateS:\Dev\Ionic\WindowsSample>
- Now, we’re getting somewhere. Let’s add Windows as a platform:
12345678910111213141516171819202122232425262728S:\Dev\Ionic\WindowsSample>ionic platform add windowsUpdated the hooks directory to have execute permissionsDownloading Default Ionic ResourcesDownloading: https://github.com/driftyco/ionic-default-resources/archive/master.zip[=============================] 100% 0.0sDone adding default Ionic resourcesAdding icons for platform: androidAdding windows project...Running command: cmd "/s /c "C:\Users\marka\.cordova\lib\npm_cache\cordova-windows\4.1.0\package\bin\create.bat S:\Dev\Ionic\WindowsSample\platforms\windows com.ionicframework.windowssample928374 WindowsSample""Creating Cordova Windows Project:App Name : WindowsSampleNamespace : com.ionicframework.windowssample928374Path : S:\Dev\Ionic\WindowsSample\platforms\windowsCopying template to S:\Dev\Ionic\WindowsSample\platforms\windowsRunning command: "C:\Program Files\nodejs\node.exe" S:\Dev\Ionic\WindowsSample\hooks\after_prepare\010_add_platform_class.js S:\Dev\Ionic\WindowsSampleadd to body class: platform-windowsInstalling "cordova-plugin-console" for windowsInstalling "cordova-plugin-device" for windowsInstalling "cordova-plugin-splashscreen" for windowsInstalling "cordova-plugin-statusbar" for windowsInstalling "cordova-plugin-whitelist" for windowsThis plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.Installing "ionic-plugin-keyboard" for windowsSaving platform to package.json fileS:\Dev\Ionic\WindowsSample>
- 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:
123<platform name="windows"><preference name="windows-target-version" value="10.0" /></platform>
- Now, we can build the app for windows:
123456789101112S:\Dev\Ionic\WindowsSample>S:\Dev\Ionic\WindowsSample>ionic build windowsRunning command: "C:\Program Files\nodejs\node.exe" S:\Dev\Ionic\WindowsSample\hooks\after_prepare\010_add_platform_class.js S:\Dev\Ionic\WindowsSampleadd to body class: platform-windowsRunning command: cmd "/s /c "S:\Dev\Ionic\WindowsSample\platforms\windows\cordova\build.bat""MSBuildToolsPath: C:\Program Files (x86)\MSBuild\14.0\bin\amd64\Building project: S:\Dev\Ionic\WindowsSample\platforms\windows\CordovaApp.Windows10.jsprojConfiguration : debugPlatform : anycpuCordovaApp.Windows10 -> S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appxBUILD OUTPUT: S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appxS:\Dev\Ionic\WindowsSample>
- Now, if we navigate to the folder specified in the BUILD OUTPUT line (without the filename at the end,) we find this:
- 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!
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:
1 2 3 4 5 |
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { //cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } |
Also, instead of running the .ps1 script mentioned above manually, Ionic can do it for you if you like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
S:\Dev\Ionic\WindowsSample>ionic run windows Running command: "C:\Program Files\nodejs\node.exe" S:\Dev\Ionic\WindowsSample\hooks\after_prepare\010_add_platform_class.js S:\Dev\Ionic\WindowsSample add to body class: platform-windows Running command: cmd "/s /c "S:\Dev\Ionic\WindowsSample\platforms\windows\cordova\run.bat"" MSBuildToolsPath: C:\Program Files (x86)\MSBuild\14.0\bin\amd64\ Building project: S:\Dev\Ionic\WindowsSample\platforms\windows\CordovaApp.Windows10.jsproj Configuration : debug Platform : anycpu CordovaApp.Windows10 -> S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appx BUILD OUTPUT: S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appx Deploying windows10 package to device: S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appx Attempt to uninstall previous application version... Attempt to install application... Found package: S:\Dev\Ionic\WindowsSample\platforms\windows\AppPackages\CordovaApp.Windows10_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows10_0.0.1.0_anycpu_debug.appx Installing app... Success: Your app was successfully installed. Starting application... ActivateApplication: com.ionicframework.windowssample928374_h35559jr9hy9m!com.ionicframework.windowssample928374 |
Hope this helps!
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?
I don’t yet, but I’m glad you enjoyed this one!
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.
I haven’t actually used this on a phone, just Windows 8 and 10. Sorry…
Hi!
Thank you for sharing your experience! I see you had the same issue than me about keyboard exception, can’t believe this has been there for more than a year, the “hideKeyboardAccessoryBar” was just not there in the proxy for windows. I made a commit to fix this, feel free to clone it, waiting for them to accept my pull request : https://github.com/OreOreDa/ionic-plugin-keyboard
Cheers!