{"id":3801,"date":"2015-07-29T10:30:00","date_gmt":"2015-07-29T10:30:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2015\/07\/29\/targeting-windows-10-with-your-apache-cordova-app\/"},"modified":"2022-05-18T22:45:42","modified_gmt":"2022-05-19T05:45:42","slug":"targeting-windows-10-with-your-apache-cordova-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/targeting-windows-10-with-your-apache-cordova-app\/","title":{"rendered":"Targeting Windows 10 with your Apache Cordova app"},"content":{"rendered":"<p>This April, in concert with Windows 10 Technical Preview 2, <a href=\"http:\/\/blogs.msdn.com\/b\/visualstudio\/archive\/2015\/04\/30\/introducing-the-windows-10-apache-cordova-platform.aspx\">we debuted support for the Windows 10 platform for Apache Cordova<\/a>. Now, with the availability of <a href=\"http:\/\/go.microsoft.com\/fwlink\/p\/?linkid=280676\">Windows 10<\/a>, full Windows 10 support is part of the <a href=\"http:\/\/cordova.apache.org\/docs\/en\/edge\/guide_platforms_win8_index.md.html#Windows%208%20Platform%20Guide\">Windows Apache Cordova platform<\/a> and native to <a href=\"http:\/\/www.microsoft.com\/click\/services\/Redirect2.ashx?CR_CC=200661215\">Visual Studio 2015<\/a>.&nbsp;<\/p>\n<p>Apache Cordova allows you to write apps targeting iOS, Android, Windows, and Windows Phone (and other platforms) with a single code base using HTML, JavaScript, and CSS. Support for the Universal Windows platform now means that from this single code base you can also target the entire family of Windows 10 devices&mdash;desktop, phone, tablet, IoT devices, and eventually HoloLens, Xbox, Surface Hub, and more. Your Cordova apps targeting Windows 10 can smoothly transition between usage modes, such as from desktop to tablet when the user removes the keyboard. They can also take advantage of all the new features of Windows 10, such as Cortana integration.<\/p>\n<p>Windows 8.1 apps written with HTML, CSS, and JavaScript&mdash;with or without Cordova&mdash;will continue to work with full fidelity on Windows 10. If you target Windows 10, however, you&rsquo;ll be able to take advantage of changes to the security model for Windows Web apps that allow you to write apps in a way more natural to web programming styles. For instance, new security policy changes mean that you can use the JavaScript libraries you love, such as Angular and Bootstrap, while still having the power of direct access to the Windows Runtime Library (WinRT).<\/p>\n<p>You don&rsquo;t need to be running Windows 10 on your development box to build, run, and test your Cordova Windows 10 app. If you&rsquo;re running Windows 8.1, you can use an emulator to run your app. Also, if you&rsquo;re running Windows 7 or Windows 8.1, you can deploy to a remote Windows 10 machine or device.<\/p>\n<p>If you prefer to build for Windows 8.1 and Windows Phone 8.1, you can continue to do so using the <span style=\"font-family: 'courier new', courier\">windows-target-version<\/span> and <span style=\"font-family: 'courier new', courier\">windows-phone-target-version<\/span> properties in your project&rsquo;s config.xml file.<\/p>\n<p>Let&rsquo;s get started building an Apache Cordova app targeting Windows 10.<\/p>\n<h2>Installation Prerequisites<\/h2>\n<ul>\n<li><a href=\"http:\/\/go.microsoft.com\/fwlink\/p\/?linkid=280676\">Windows 10<\/a>, Windows 8.1, or Windows 7<\/li>\n<li><a href=\"http:\/\/www.microsoft.com\/click\/services\/Redirect2.ashx?CR_CC=200661215\">Visual Studio 2015<\/a> (includes <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=619615\">tools for Windows 10<\/a>)<\/li>\n<\/ul>\n<p>The next sections detail adding the Windows 10 Cordova platform to your project.<\/p>\n<h2>Use the Cordova Windows platform<\/h2>\n<p>If you have an existing project that you&rsquo;d like to add Windows 10 support to, skip down to &ldquo;<a href=\"#AddPlatToProj\">Adding the Windows 10 platform to your Cordova project<\/a>&rdquo;.<\/p>\n<h2>Create a new Cordova project<\/h2>\n<p>Open Visual Studio and create a new project using the File &gt; New &gt; Project menu, then select the JavaScript &gt; Apache Cordova Apps &gt; Blank App template to create a new Cordova project.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/1263.01VS2015RTMWin10withCordovaNewProjects_20E1056C.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"New Project Dialog\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/1263.01VS2015RTMWin10withCordovaNewProjects_20E1056C.png\" alt=\"New Project Dialog\" width=\"604\" height=\"418\" border=\"0\" \/><\/a><\/p>\n<h2><a name=\"AddPlatToProj\"><\/a>Add the Windows 10 platform to your Cordova project<\/h2>\n<p>First, Visual Studio needs to use Cordova CLI version 5.1.1 or later. Open the Cordova configuration designer by double-clicking on config.xml in the Solution Explorer. Choose Platforms on the left and then set the Cordova CLI textbox to 5.1.1:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/0285.02VS2015RTMWin10withCordovaChangeCLIVersion_3C859162.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Change CLI Version\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/0285.02VS2015RTMWin10withCordovaChangeCLIVersion_3C859162.png\" alt=\"Change CLI Version\" width=\"604\" height=\"159\" border=\"0\" \/><\/a><\/p>\n<p>Save your changes, and then close the configuration designer using the X in the tab strip. This is important because the next step will download a new configuration.<\/p>\n<p>Now set Windows-AnyCPU as your build target in the toolbar (as outlined below), and then build the solution using the Build &gt; Build Solution menu item.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/5584.03VS2015RTMWin10withCordovaBuildTarget_1C6A84A5.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Build Target\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/5584.03VS2015RTMWin10withCordovaBuildTarget_1C6A84A5.png\" alt=\"Build Target\" width=\"504\" height=\"182\" border=\"0\" \/><\/a><\/p>\n<p>Your first build will take a few moments because it&rsquo;s using node package manager (npm) to pull down the updated Cordova platform and add it to your project. You can see its progress in the Output Window.<\/p>\n<p>Now that your project has the correct version of the Windows platform, reopen the configuration designer by double-clicking config.xml. Choose Windows on the left, double-click on config.xml to reopen the configuration designer, select the Windows tab on the left, and then change the Windows Target Version to Windows 10.0:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/3441.04VS2015RTMWin10withCordovaWindowsTarget_2A3CCAA0.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Windows Target\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/3441.04VS2015RTMWin10withCordovaWindowsTarget_2A3CCAA0.png\" alt=\"Windows Target\" width=\"604\" height=\"229\" border=\"0\" \/><\/a><\/p>\n<h2>Add a plugin to your app<\/h2>\n<p>You can also add a plugin to your app through the configuration designer&rsquo;s Plugin tab. This shows a list of core plugins on the Core tab, lets you point to any other plugin (whether local or on Git) on the Custom tab, and shows you which plugins are already part of your project on the Installed tab.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/4011.05VS2015RTMWin10withCordovaPlugins_0A21BDE3.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Plugins\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/4011.05VS2015RTMWin10withCordovaPlugins_0A21BDE3.png\" alt=\"Plugins\" width=\"604\" height=\"268\" border=\"0\" \/><\/a><\/p>\n<h2>Build and Run the app<\/h2>\n<p>To build and run for Windows 10, ensure the build target is set to Windows-AnyCPU. To deploy the app, choose a deployment target. If you&rsquo;re running Windows 10 on your dev box, you can choose Local Machine to deploy locally, Remote Machine to deploy to another Windows 10 device, or an emulator. If you&rsquo;re running Windows 8.1, you can choose between Remote Machine and the mobile emulators. For Windows 7 developers, choose the Remote Machine option.<\/p>\n<p>If you are running on Windows 10 and choose to deploy locally, pick the deployment target Local Machine, then choose run. If you get a message about Developer Mode, follow the instructions to enable Developer Mode on your machine. After a short time, you should see your app running.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/2867.06VS2015RTMWin10withCordovaFirstRun_55152EB2.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Build and First Run\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/2867.06VS2015RTMWin10withCordovaFirstRun_55152EB2.png\" alt=\"Build and First Run\" width=\"604\" height=\"326\" border=\"0\" \/><\/a><\/p>\n<p>If you&rsquo;re running on Windows 8.1, you can choose one of the available emulators from the deployment target menu.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/3438.07VS2015RTMWin10withCordovaEmulatorChoice_49EBA468.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"EmulatorChoice\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/3438.07VS2015RTMWin10withCordovaEmulatorChoice_49EBA468.png\" alt=\"EmulatorChoice\" width=\"554\" height=\"279\" border=\"0\" \/><\/a><\/p>\n<p>Then run your app. You should see the emulator appear and your app running in it.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/7242.08VS2015RTMWin10withCordovaEmulator_37A2DDA6.png\"><img decoding=\"async\" style=\"float: none;margin-left: auto;margin-right: auto;border: 0px\" title=\"Emulator\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/7242.08VS2015RTMWin10withCordovaEmulator_37A2DDA6.png\" alt=\"Emulator\" width=\"290\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<h2>Learn More<\/h2>\n<p>You can find more information on building for and using the <a href=\"https:\/\/github.com\/apache\/cordova-windows\/blob\/windows10\/cordova-windows10.md\">Windows 10 Cordova platform on the Apache Cordova site<\/a>. If you&rsquo;d like to learn more about building Universal Windows app targeting a variety of Windows 10 devices, check out <a href=\"http:\/\/blogs.msdn.com\/b\/somasegar\/archive\/2015\/07\/29\/building-apps-for-windows-10-with-visual-studio-2015.aspx\">Soma&#8217;s post for details on building Universal Windows apps in VS 2015<\/a>,&nbsp;refer to <a href=\"http:\/\/dev.windows.com\/\">Windows Dev Center<\/a>, or watch videos on how to develop using Visual Studio 2015:<\/p>\n<ul>\n<li><a href=\"https:\/\/channel9.msdn.com\/Events\/Visual-Studio\/Visual-Studio-2015-Final-Release-Event\/Apache-Cordova--Build-apps-for-Windows-10\">Apache Cordova &ndash; Build apps for Windows 10<\/a><\/li>\n<li><a href=\"https:\/\/channel9.msdn.com\/Events\/Visual-Studio\/Visual-Studio-2015-Final-Release-Event\/Intro-to-Universal-Windows-Platform\">Introduction to Universal Windows Platform<\/a><\/li>\n<li><a href=\"https:\/\/channel9.msdn.com\/Events\/Visual-Studio\/Visual-Studio-2015-Final-Release-Event\/Universal-Windows-Platform-Tailored-Experiences\">Universal Windows Platform Tailored Experiences<\/a><\/li>\n<li><a href=\"https:\/\/channel9.msdn.com\/Events\/Visual-Studio\/Visual-Studio-2015-Final-Release-Event\/Universal-Windows-Apps-coding-for-different-devices\">Universal Windows Apps: coding for different devices<\/a><\/li>\n<\/ul>\n<p>Finally, <a href=\"http:\/\/stackoverflow.com\/tags\/cordova-win10\/info\">give us feedback on the Cordova Windows 10 platform<\/a> using the &lsquo;Windows10&rsquo; tag. We look forward to hearing from you.<\/p>\n<p>&nbsp;<\/p>\n<table style=\"width: 600px\" border=\"0\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"128\"><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/1212.clip_image001_thumb_776CC42B.jpg\"><img decoding=\"async\" style=\"border: 0px\" title=\"\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2015\/07\/1212.clip_image001_thumb_776CC42B.jpg\" alt=\"\" width=\"115\" height=\"144\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"472\"><strong>Polita Paulus<\/strong>, Principal PM Manager, Visual Studio Client Team<\/p>\n<p>Polita Paulus works on TypeScript, Tools for Apache Cordova, and the JavaScript Language Service. Over the years, she&rsquo;s worked on several projects, mostly centered around making web developers&rsquo; lives a little better. Outside of work, she likes bikes and running.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>This April, in concert with Windows 10 Technical Preview 2, we debuted support for the Windows 10 platform for Apache Cordova. Now, with the availability of Windows 10, full Windows 10 support is part of the Windows Apache Cordova platform and native to Visual Studio 2015.&nbsp; Apache Cordova allows you to write apps targeting iOS, [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1196,4980,155,1029],"tags":[136,137,376,124,185,125,196,241],"class_list":["post-3801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desktop","category-java","category-visual-studio","category-web","tag-css","tag-html","tag-java","tag-javascript","tag-node-js","tag-typescript","tag-visual-studio-2015","tag-windows-10"],"acf":[],"blog_post_summary":"<p>This April, in concert with Windows 10 Technical Preview 2, we debuted support for the Windows 10 platform for Apache Cordova. Now, with the availability of Windows 10, full Windows 10 support is part of the Windows Apache Cordova platform and native to Visual Studio 2015.&nbsp; Apache Cordova allows you to write apps targeting iOS, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/3801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=3801"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/3801\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=3801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=3801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=3801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}