Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App development

CordovaInVSToday at TechEd US, Microsoft announced the preview release of Visual Studio tooling support for Apache Cordova. This new capability is based on the open source project Apache Cordova, whereby developers can target Android, iOS, Windows Store and Windows Phone 8 from a single project using existing HTML5 and JavaScript skills and code to build apps that take advantage of the native capabilities of the device.

“It is very exciting not only to welcome Visual Studio developers, but also to welcome first class tools to Apache Cordova. This development is a great validation of the hard work of the MS Open Tech team and Apache Cordova contributors. We look forward to continuing this cool work with Microsoft’s developers.” – Jesse MacFadyen – Adobe – Core Apache contributor - @purplecabbage

From our perspective, this is exciting news for developers. MS Open Tech has been a long-time contributor to the Apache Cordova project (a.k.a. PhoneGap), which has become a popular open source platform to build native mobile applications with HTML5, JavaScript and CSS for all major mobile device platforms. MS Open Tech contributed Windows device support to the Apache Cordova project, and is now also contributing to existing popular plugins as well as bringing new cross platform plugins to the community such as the WebSQL plugin for Cordova.

In complement to the Xamarin support in Visual Studio announced at Build 2014 last month, the Multi Device Hybrid Apps for Visual Studio extension responds to the growing imperative for developers to build great experiences across a wide variety of devices without having to learn a new set of skills for each one. These tools offer developers a choice of Web technologies and .Net technologies in Visual Studio that will enable them to leverage their existing skills to target all major mobile platforms..

Using Multi-Device Hybrid Apps for Visual Studio extension, developers will gain:

  • The ability to streamline multi-platform device development and improve efficiency through the use of existing tools
  • A great code editor
  • Advanced debugging tools
  • Testing capabilities for all platforms
  • Various open source front-end frameworks such as Angular, Bootstrap, Backbone, Underscore and WinJS
  • Integration with Microsoft services such as Azure Mobile services, Azure AD, Application Insights and Office 365

Web developers used to integrating open source frameworks within their code should take comfort in knowing that they will be able to use popular open source front end frameworks such as Angular, BootStrap, Backbone, Underscrore and WinJS. To help developers get started with the extension, samples are available for the use of Angular, Backbone and WinJS, in the form of a To-Do demo app.

Developers can also do advanced debugging on their JavaScript code within Visual Studio, setting breakpoints, inspecting performance issues, analyzing memory usage and performing other debugging tasks easily for Android 4.4 and Windows Store apps. As well, they can test apps using a built-in simulator based on the open source project Apache Ripple, using Microsoft and 3d party emulators, or test on a physical device attached to the development computer. Developers can also take advantage of a remote agent running on a Mac to build apps for iOS right from Visual Studio, and then launch the iOS simulator remotely.

The preview release of the Multi-Device Hybrid apps for Visual Studio can be downloaded here. You can also learn more about this new feature on MSDN.

To learn more about MS Open Tech’s contributions to the Apache Cordova project, visit our project page http://aka.ms/apachecordova.


33 thoughts on “Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App development

  1. Pingback: Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App development | Dave Voyles | Tech Evangelist at Microsoft

  2. Pingback: Microsoft Azure Mobile Services – News (2) | Azure Community Deutschland

  3. Pingback: TechEd North America 2014 Day 1 Keynote « ブチザッキ

  4. Pingback: Dew Drop – May 13, 2014 (#1775) | Morning Dew

  5. Why does Cordova integration requires Windows 8?
    A lot of developers use Win7 and won’t upgrade, including myself.
    Will be there any chances to get support for Win7?
    Who’s the blocking part, is it Apache Cordova or Microsoft?

    • Hi Bernhard
      Thanks for your feedback.
      As of right now, the requirement for Windows 8 is due to the fact that the extension packages all platforms support and Windows 8 development, as well as the Windows Phone 8 emulator require Windows 8. This is the blocking factor right now.
      That said, the Visual Studio team understands the request for Windows 7 support and they are investigating the work needed. No guarantee though at this point.
      Stay tuned

  6. Hi Olivier Bloch, this is a fantastic news for all Cordova developers. However, how to take advantages of this Cordova integration e.g. debugging the running app on the existing Cordova or even Sencha Touch generated or direct projects? Like I use Sencha Touch to generate cordova project and after it how can I hook the Sencha Touch Project to the Cordova integration feature so I can use its amazing stuff on the Sencha Touch generated Cordova project. I am pretty sure this is a question for all other Sencha Touch and Cordova developers. I am looking forward to your reply. Cheers

    • Hi Winston
      This is definitively an interesting use case. I have not looked into this scenario but will give it a try and will get back to you with an answer if I find a smart way to hook these up. Stay tuned!
      Olivier

  7. Hi Olivier Bloch, this is a fantastic news for all Cordova developers. However, how to take advantages of this Cordova integration e.g. debugging the running app on the existing Cordova or even Sencha Touch generated or direct projects? Like I use Sencha Touch to generate cordova project and after it how can I hook the Sencha Touch Project to the Cordova integration feature so I can use its amazing stuff on the Sencha Touch generated Cordova project. I am pretty sure this is a question for all other Sencha Touch and Cordova developers. I am looking forward to your reply. Cheers(please ignore the previous comment as I forgot to subscribe its follow-up comments via email, thank you)

  8. Hi,
    Could anyone give me a rough period about when the Official release version of “Multi-Device Hybrid Apps (Preview)” of Visual Studio will be?

    I know it’s CTP1 at the moment.

    Thanks alot.

    • Hi, we cannot share the date for the final release as it is not fixed yet. We’ll keep you posted of the progress! Thanks for the interest

  9. Excluding all non-Windows 8 developers from the start shows a lack of respect to the majority of your Visual Studio users. It also causes again bad smells in open source communities. Absolutely disappointing. You should have learned your lessons earlier Microsoft. Shame on you.

  10. Pingback: 跨行動裝置 App 開發: 使用 Visual Studio 2013 + Apache Cordova (PhoneGap) - MSDN 台灣部落格 - Site Home - MSDN Blogs

  11. Pingback: Hands on the Apache Cordova plugin “Multi-Device Hybrid Apps” integrated in Visual Studio 2013 Update 2 | rob.alarcon

  12. I need help with Multi-Device Hybrid Apps

    I currently get the following error when attempting to run a hybrid app using the new cordova ctp for Visual Studio 2013 Ultimate.

    C:\Users\Juan David\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 1

    And…

    El comando “”C:\Users\Juan David\AppData\Roaming\npm\node_modules\vs-mda\vs-cli” prepare –platform Android — configuration Debug –projectDir . –projectName “VisualStudioOnlineExplorer”” salió con el código 8.

    :/

  13. Does anyone know how to update the version of Cordova? v3.5 has been released and I have a dependency for v3.5 and a plug in we are using from one of our vendors..

    • Update it via NPM just as you would a fresh install (“sudo npm install -g cordova”) and then perform a “cordova platform update ” in the root of your project/app folder.

      • Hi, I tried, but cannot use that command cordova platform update as currently working directory is not a cordova-based project. I traveled down to other folders and couldn’t find any .cordova folder. I even created the .cordova folder but still doesn’t work. Why the Hybrid Cordova App Template doesn’t create the standard cordova folder structure?

      • OK – so first off, that’s how you do it on Mac/Linux (which we know how to do as we are cordova/phonegap developers and have historically built on Mac for Android/iOS). I did a npm install -g cordova inside visual studio NPM console and while it does do an update and install it (I see a 3.5.0 directory), the VS Hybrid App extension does not use the 3.5.0 source and there no config properties to point it to a specific build directory…. I tried overlaying the current 3.4 code with 3.5 and that wreaks havoc as there’s all kinds of dependencies (java files, etc) which are hidden by the Project Template & build commands. Also tried create a new app and it still uses the 3.4.0 code.

        • Joe: People come to forums like this from everywhere and don’t necessarily direct their questions to things germane to the original article. So, when I read your two back-to-back posts with no mention of the CTP or Visual Studio, I assumed (ah, so dangerously) that you were just another person who couldn’t seem find such instructions for a standard Cordova installation and thought, “Eh, I will use the shotgun approach and see what I find out.” This is what the French call “my bad”. Or perhaps that isn’t French at all.

          And, after all that nonsense, I can tell you: I got nothing. I will, however, ask this question that will surely open me back up for assault: Is there a reason not to perform the build independently of Visual Studio and the extension for this specific instance? Perhaps you could just use the NPM-installed 3.5 on your working directory to get around the roadblock? [ducks for cover/]

      • Gotcha. Sorry I assumed (so dangerously as well) that since I was in the topic, I didn’t have to mention it.. You were awesome jumping in and I appreciate it. I’ve been down this path before working over in xCode and Eclipse and mixing/matching and it never turns out well – 99% of the time I wind up using a working version not necessarily the latest – but in this specific instance we needed a new app and the 3rd party specifically needs 3.5 (there’s a critical fix in it). Was just trying out the CTP – so far I like it – there’s a couple of extra steps in there which I don’t like, but overall even with the CTP, if I had a 3.4.0 app I needed to produce – I’d easily do it in VS2013 on my desktop instead of jumping over to our Mac environment. Guess I’ll just have to wait for MS to move this along in the path and see how I plays out. More than likely I see them releasing multiple project templates for each of the versions and probably won’t have a way to do a direct upgrade once it’s created – just based on the complexity – but that’s a guess on my part..

        Don’t know about you all – but we’ve been bounding back and forth between native, cordova and Xamarin and we’ve been leaning down the cordova and Xamarin path (each development team picks a platform for their projects) – so long term we’re still OK..

        • Joe, you can update to 3.5 by going to \Users\username\AppData\Roaming\npm\node_modules\vs-mda\, open the package.json file and change the cordova dependency version to “latest” or whatever version you want, and then “npm install cordova”. Clear your VS solution and rebuild.

          • @Tester That does not work – still build with 3.4.0.. I’m looking through all the batch files, etc and when it knows it needs to build for android it goes to the .cordova/android directory then pulls down the build/libraries from the 3.4.0 directory. If I di a npm install – there’s no update created and while I see the new versions of 3.5.x – it won’t build with them… Where did you get those instructions from?

          • OK – @tester – you gave me something which caused me to start digging even deeper… Here’s what I had to do in %APPDATA%\\npm\node_modules\\vs-mda\node_modules\\cordova\\ there is a file called “platforms.js” In there are the URLs and versions used for each of the platforms for cordova. use the URL (on github) to check which specific versions you have/need – for example iOS had a 3.4.1. build, but android and WP7 did not. So don’t just blindly change them all. Exit Visual Studio. Go into your project directory and delete everything in the bld directory. Now restart VS. Do a CLEAN on the project and then BUILD/RUN it – in the log you should see that the platform gets downloaded AND that the batch file run (create.bat) is now the new version. So far, that’s allowed me to update iOS and Android. Going to do some more testing to make sure it really works… Hope they make this easier in the release…

          • Further note – this DOES NOT solve for iOS remote compiles. Something in the xcode creator is still stuck on 3.4.1. This does work for Android and Windows… For iOS – it does download the 3.5 cordova libs – but it doesn’t actually use them….

  14. Pingback: Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App developmentCoder Blogs

Leave a Reply