Developing multi device hybrid apps using VS 2013/VS 2015 preview

Apache cordova is a framework used for developing hybrid apps and was a core part of phonegap. Microsoft added cordova support from  visual studio 2013 update 3.

The preview release of VS 2015 comes with cordova tools.

So what is a multi device hybrid app?.

Its a hybrid app  targeted for multiple devices (android, windows phone, ios and so on). A hybrid app contains a combination of html5, css and javascript which runs in a device specific native chrome less browser. Cordova offers a specific native browser and plugins for each device, through which the html app access native functionality such as camera, accelerometer, contacts  etc. in JavaScript.

How do I create a hybrid app?

Its simple, just create a cordova project. The project template sits under other languages –> Javascript ( If your editor configured to C# environment as default )


Cick on the Blank app, VS create a solution with the following structure


Its easy, the file config.xml contains configuration for all the devices, and opens a configuration window like below when clicked.


Lets have a look at the structure

  • index.html : is starting point of the app
  • scripts folder contains all the Jscript files referenced,
  • css folder contains all the stylesheets that app references
  • Images folder contains images
  • res folder contains all the resources
  • merge folder contains all the device specific overrides


You can modify index.html with your own content.

How do I build and test the app in multi devices?

Its easy, with the help of solution platforms configuration.


Select one of the solution platforms

  1. Windows phone
  2. Android
  3. Ios
  4. Windows

and select the device type in each selected solution platform

Build the project and run the app.

Change the solution platform to Android and device type to android emulator


Change the solution platform to Windows Phone and device type to Windows phone emulator


IOS emulators require remote agents to run, so I haven’t configured any but in future posts I’ll try to build one for IOS platform.

Visual studio with cordova tools also supports ripple emulators with the help of chrome browser. If you wish not to run device specific emulators because of performance,  just use ripple emulators. The advantage of ripple emulators is that it supports real time updates i,e. once you open ripple emulator in chrome, any changes that are made in the app are reflected immediately in the emulator.


Deploying apps in app stores

Visit this link

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.