This walk through will show you how to use Visual Studio 2015 with the Tools for Apache Cordova to create hybrid mobile applications.
First you should have installed the following software.
- Visual Studio 2015
- Visual Studio Tools for Apache Cordova. You should select this feature in the Visual Studio 2015 installer.
Creating the project
Your solution should now look like the one below:
Understanding the project structure
The new Cordova project includes four top-level folders:
- merges is used to add platform-specific code.
- plugins is used for Apache Cordova plugins that provide access to native device features.
- res is used for platform-specific visual assets (icons and splash screens).
- www folder, which is used for your app code.
- css contains basic CSS style sheets that are included with the blank template.
- images is the suggested location for images for your app.
- config.xml contains configuration settings for your app.
- taco.json stores project metadata that enables Visual Studio to build on non-Windows operating systems like a Mac.
- www\index.html is the default home screen for your app.
- Project_Readme.html contains links to useful information.
Another place you’re going to want to make some changes is the basic properties of your application. For an Apache Cordova app, these settings are in the
config.xml file at the root level of your project. Notice that if you open this file from Solution Explorer in the configuration designer, you will be able to edit the file using an interface, or you can edit it directly by selecting View Code from the shortcut menu for the file.
You could even include Custom Plugins using git or local code:
Dealing with platform diferences
When building an Cordova App the www folder will be overwritten with the merges folder for the specific platform you are building for. By default, the Blank App template includes commonly used platform-specific code for Windows and Android devices in the merges folder.
The index.html file includes the following reference
<script src="scripts/platformOverrides.js"></script>. The platformOverrides.js file will be overwritten when building to use the corresponding one from the merges folder.
By default the following platform specifics will be handled:
Building and Debugging to different platforms
To build and debug the application just select the platform and click in the “play” button.
To build and debug for iOS you’ll need to configure a Remote Agent under Tools, Options, Tools For Apache Cordova, like this: