The Cordova/Ionic/PhoneGap Command Tasks

Last Update: 9/26/2016

Team Services | TFS 2017 | TFS 2015 | Previous versions: XAML Build, Release

Notice: Apple's WWDR certificate expired on Feb 14th and as a result you may experience signing failures if you have not updated the cert and removed the old one. Follow the steps outlined by Apple under What should I do if Xcode doesn’t recognize my distribution certificate? to resolve the problem. Note that this also affects development certs despite the title.

Visual Studio Team Services (formerly Visual Studio Online) and Team Foundation Services (TFS) 2015 can be used for building and testing Cordova apps in a Continuous Integration (CI) environment thanks to a new cross-platform agent that supports OSX. The end result is you can use Visual Studio Team Services or TFS to build projects created using Tools for Apache Cordova or any Cordova compliant CLI like the Ionic, PhoneGap, or TACO CLI.

To streamline CI for Cordova-based projects, we have created a series of build tasks (or steps) that you can use: Cordova Build, Cordova Command, Ionic Command, and PhoneGap Command. These tasks will automatically handle fetching the correct version of the appropriate CLI and even setup the correct version of Node.js for you if not present!

Generally you should only need to use the Cordova Build task even when building something like an Ionic project (and it has some useful features in this specific area). However, if you want to run a non-build CLI related command, use the Cordova and Ionic Command tasks. You can also use the PhoneGap Command task to execute non-build related commands or use PhoneGap Build. See PhoneGap CLI documentaiton for details. This article will specifically focus the Command tasks. See the Cordova Build tutorial for details on building and testing along with information on setting up your own build agent.

Installing the Command tasks

To setup a Cordova build in Visual Studio Team Services or TFS 2015, you will need to install the Cordova Build task in your collection.

The Cordova Command task

Add the Cordova Command task to your build definition by going to the "Build" tab, adding a new build step, and selecting Cordova Command from the Build category

Available Settings:

  • Command: The CLI command. For example "plugin".
  • Arguments: Additional arguments for the command. Ex: "add cordova-plugin-camera"
  • Cordova Version: Version of the Cordova CLI you want to use to run the command. If you're using Tools for Apache Cordova you can leave this blank and the correct version will be used based on the contents of taco.json. Otherwise, if not specified, it uses the version specified by the CORDOVA_DEFAULT_VERSION environment variable (like in Team Services) and falls back to the latest version if no environment variable is set.
  • Advanced > Working Directory: Location of the Cordova project itself inside your solution (not the solution root).

Next, given the task is cross-platform, if you want to be sure this build definition only runs on Windows or OSX, you will need to add a demand that "cmd" exists for Windows...

Windows Build Definition - Demand

... or "xcode" exists for OSX...

OSX Build Definition - Demand

The Ionic Command task

The Ionic Command task is similar to the Cordova one. Add the Ionic Command task to your build definition by going to the "Build" tab, adding a new build step, and selecting Ionic Command from the Build category

Available Settings:

  • Command: The CLI command. For example "state".
  • Arguments: Additional arguments for the command. Ex: "restore"
  • Ionic Version: If not specified, uses the Ionic CLI version specified by the IONIC_DEFAULT_VERSION environment variable (like in Team Services) or the latest if no environment variable is set.
  • Cordova Version: Version of Ionic you want to use to run the command. If left blank it uses the version specified by the CORDOVA_DEFAULT_VERSION environment variable (like in Team Services) and falls back to the latest version if no environment variable is set.
  • Advanced > Working Directory: Location of the Cordova project itself inside your repository.

Troubleshooting Tip: If you encounter a spawn EACCES error when building on a Mac or Linux, be sure all files in the hooks folder to have an "execute bit" set as this a requirement for Cordova. To resolve, add an execute bit to the files in source control or add the following using the Command Line task: chmod +x hooks/after_prepare/010_add_platform_class.js

The PhoneGap Command task

The PhoneGap Command task is similar to the Cordova one. Add the PhoneGap Command task to your build definition by going to the "Build" tab, adding a new build step, and selecting PhoneGap Command from the Build category

Available Settings:

  • Command: The CLI command. For example "remote login".
  • Arguments: Additional arguments for the command.
  • PhoneGap Version: If not specified, uses the PhoneGap CLI version specified by the PHONEGAP_DEFAULT_VERSION environment variable (like in Team Services) or the latest if no environment variable is set.
  • Advanced > Working Directory: Location of the Cordova project itself inside your repository.

More information

Q&A

I use Team Foundation Server on-premises and I don't see some of these features. Why not?

Some of these features are available only on Visual Studio Team Services and not yet available on-premises. Some features are available on-premises if you have upgraded to the latest version of TFS.