Setting up Apache Cordova for cross-platform mobile development

Feature Extraction

Rate me:

4.00/5 (1 vote)

17 Feb 2015CPOL3 min read

20.8K

In this article I will cover the steps to set up Apache Cordova. I’ll first set up the Android SDK, an Android Virtual Device, Apache Ant and finally, Cordova.

I will then use Cordova to create a starter cross-platform mobile app, and run it on the Android virtual device.

I have performed this installation on Windows 8.1, but the same steps would apply for Linux as well. You would only need to adapt the environment variables (simply use ${VARIABLE} instead of %VARIABLE% )

Before you start, you will first need to ensure the Java Development Kit is installed for Android. You can check if you already have it by running “java -version” from the terminal.

So, let’s get started:

Install the Android SDK, you could either use the Windows installer, or download and unzip the SDK into a folder. Note that the installer will not set the PATH for you.

Set the environment variables so Cordova (and you) can find the Android SDK:

Set ANDROID_HOME to the install / extract folder.

Update PATH to include:

%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

Set ANDROID_SDK_HOME to your profile home directory. For example:

C:\Users\<your username>\.android

In a terminal or Powershell, start the Android SDK manager, which will let you choose which components will be installed. Simply type:

android

and you will get:

Select Android API Level 19. Android’s ARM emulator is pretty slow, so if you have an Intel CPU supporting VT-x, you can speed things up by installing the Intel x86 Atom System Image and the Intel x86 emulator accelerator (You will find this in Extras -> HAXM Installer)

Once you finish configuring the SDK, quit the SDK manager and confirm your newly installed SDK targets with:

android list targets

Next, create an Android Virtual Device (AVD) with:

android avd

Use the Device Definitions tab to choose one of the preinstalled templates, and give it a name and architecture type leaving the other defaults intact. If you installed the x86 emulator images, set the target architecture to x86. I called mine LGTab.

Quit the AVD manager. You can now review the AVD(s) you created with:

android list avd

To run and test your virtual device, use

emulator -avd LGTab

Now that the Android setup is ready, we need to install Apache Ant, which is used by Cordova to build Android apps. Like Android, this is a simple xcopy installation and you will need to set the environment variables so you can use it anywhere on your system.

Download and extract Apache Ant into a folder.

Set the following environment variables:

Set ANT_HOME to the extracted Ant folder
Set ANT_OPTS to “-Xmx1024m -XX:MaxPermSize=512m“
Append PATH to include:

%ANT_HOME%\bin;

Finally, we install Apache Cordova via npm, the package manager for Node.js. (If you don’t have Node.js installed, go to http://nodejs.org/download/ and do so now!)

Install Cordova to the npm global registry so you can use it from any project folder.

npm install cordova -g

And that’s it! Cordova is installed!

You can check what’s been installed in your global npm registry with

npm list -g --depth=0

This completes our installation!

So what are you waiting for? Lets ask Cordova to create a project, add the mobile platforms you want the project to target, and run it!

cordova create HelloCordova

cd HelloCordova

cordova platform add android

cordova build

Building the Android target with Cordova

We will now run the Android app on the emulator we created earlier.

Cordova also supports iOS, Windows Phone and FireFox OS and more. See the full list here. I will cover the Windows & iOS targets in a subsequent post.