Tools to streamline developer workflow when building Apache Cordova hybrid apps have been improving steadily since the introduction of the Cordova Command Line Interface (CLI) a few years ago. The CLI greatly improved, automated and standardized common development tasks that previously relied on manual processes to create or modify configuration files, or direct manipulation of native code.

Since Cordova is open source, others are free to build upon it and distribute their own tools tailored towards a particular JavaScript framework (Ionic does this for example), or for particular use cases (Adobe’s PhoneGap CLI adds the ability to interact with their cloud based PhoneGap Build service).

Microsoft has been working on tightly integrating the Cordova ecosystem with its Visual Studio product line, including the free and cross platform Visual Studio Code editor. As part of this initiative, Microsoft open sourced TACO (Tools for Apache COrdova), an alternative CLI that aims to further improve developer productivity regardless of their choice of JavaScript framework or local development platform.

TACO is fully compatible with the regular Cordova CLI, and you can use taco and cordova commands within the same project without issue. Let’s take a look at what benefits Mac OS based developers can expect from adding TACO to their toolboxes.

Installation

Assuming we already have Node.js installed, getting TACO is simple:

sudo npm install -g taco-cli

When that’s completed, we can verify that the TACO CLI installed OK with:

taco -version

Which at the time of writing should output:

1.2.1

Creating an App

Let’s go ahead and use the TACO CLI to create a Cordova app called TACOApp in a folder TACOApp and with app ID com.moduscreate.tacoapp:

taco create TACOApp com.moduscreate.tacoapp TACOApp

This will download Cordova if needed (current version at time of writing is 5.4.1), and create a blank app in TACOApp.

Taking a look at what was created for us, we see:

ls -lF TACOApp
-rw-rw-rw-  1 simon  staff  6259 Apr 29 20:49 config.xml
drwxr-xr-x  3 simon  staff   102 Apr 29 20:49 hooks/
drwxr-xr-x  4 simon  staff   136 Apr 29 20:49 merges/
-rw-r--r--  1 simon  staff     2 Apr 29 20:49 package.json
drwxr-xr-x  2 simon  staff    68 Apr 29 20:49 platforms/
drwxr-xr-x  2 simon  staff    68 Apr 29 20:49 plugins/
drwxr-xr-x  5 simon  staff   170 Apr 29 20:49 res/
-rw-r--r--  1 simon  staff    50 Apr 29 20:49 taco.json
drwxr-xr-x  6 simon  staff   204 Apr 29 20:49 www/

This looks like what we would expect for a regular Cordova app created using the Cordova CLI, with the addition of a folder named res and a file named taco.json.

res contains some boilerplate resources to support the Hello World app that the CLI creates for us – icons, splash screens and platform specific configuration files.

The file taco.json tells TACO which version of Cordova CLI and which “kit” (known set of plugin version numbers that work well together) were used when creating the app. There’s more information on TACO kits in the documentation.

Adding Platforms

To make our app work on a given family of devices, we need to add one or more Cordova platforms. Let’s add Android and iOS, and see what TACO does differently here:

taco platform add android

This will create and configure the Cordova Android platform for our project, and when it’s done we can expect to see output similar to:

Success! Platform(s) android added to the project.

Using the regular Cordova CLI workflow, we would now have to go and install the Android SDKs and tools at the correct levels for the version(s) of Android we’re targeting or have done this separately prior to commencing our app project.

The TACO CLI differs from vanilla Cordova here. It comes with a handy extra command that can get those platform specific SDKs and requirements for us.

taco install-reqs android

This will install the required tools and SDKs not already present on the local machine, so that it’s ready to build the app.

Similarly, we can add iOS platform support to our new app with:

taco platform add ios

taco install-reqs ios

As with a normal Cordova CLI project, our project folder now contains:

platforms/android
platforms/ios

Adding Plugins

Plugins work as you would expect.

taco plugin add cordova-plugin-camera

will add the camera plugin for all installed platforms, at a version number that’s set by the TACO kit that the app is using. A kit is a set of plugins that are known to work well with a given version of Cordova. There’s more documentation on this here. If you definitely want the latest version of a plugin, simply use:

taco plugin add cordova-plugin-camera@latest

Building the App Locally

To build the app, we simply tell TACO which platform we want to build, in the same way that we would using the regular Cordova CLI:

taco build android
taco build ios

These work exactly as they would with a regular Cordova CLI project.

Running the App

Having built our app, we’ll want to run and debug it, both on real device and using emulators. TACO has some extra functionality over the vanilla Cordova CLI here, too.

Emulators and Devices

TACO allows us to run our app in an emulator, again using the same command anyone familiar with the Cordova CLI will recognize:

taco emulate ios
taco emulate android

The boilerplate app that TACO generates is visually different from the one that the regular Cordova CLI delivers, but has the same “deviceready” event detection logic. TACO’s boilerplate looks like this:

TACO also allows developers to run their apps on devices connected to their machine, or to a configured remote Mac build server for Windows developers wanting to run an iOS app.

Assuming we’re on a Mac, and have an iOS device connected,

taco run ios

will start the app on the connected device and run it.

Live Reload

TACO allows us to run our app (on device, or in the emulator) in a way that permits us to change HTML / JS / CSS / image assets without having to do another build and emulate cycle.

Both the run and emulate commands support live reload (using BrowserSync). Here’s an example of using it with the iOS simulator:

taco emulate ios --livereload

Then, we can edit the application source, and it will live reload when we save our changes.

Device Sync

Another feature TACO offers over the vanilla Cordova CLI is the ability to start an app on multiple devices and have events from one mirrored in the other.

This is very useful when demonstrating or testing with different platforms. Here’s an example where on the left we have an iPhone running our app, and to the right an Android Moto X phone also running it. These are both physical devices. Their output is captured using QuickTime for the iPhone and the excellent Vysor for Android.

Both devices need to be attached to your Mac, then enabling this behavior is as simple as:

taco run -device --devicesync

Live Reload is also available whilst device sync is running, so you can change your application’s files and see changes on both platforms at once. Device Sync can also work with an emulator for one or both platforms, rather than physical devices.

Conclusion

Microsoft offers some useful enhancements for developers working with Cordova. Whether for a new project or to improve workflow on a work in progress app, developers should take a closer look at TACO CLI.

The live reload and device sync features are a great productivity boost. There is also the ability to use a remote build server which allows developers working on Windows machines to participate in building apps that need to run on iOS. In this quick look at TACO, we didn’t cover all of its features or integration with the cross platform Visual Studio Code editor. For more details we’d recommend you check out the official documentation.

Which tools do you use to be productive when building Cordova apps? We’d love to hear from you. If you know someone who would find this article informative, please share! And follow me on Twitter or Modus Create: Front End Development.

*featured image “Open tacos” by Ben Tesch, Creative Commons License, no changes were made to image