Cordova/PhoneGap Installation Guide

Mobile Apps, Tutorials

Part of my job involves working with PhoneGap/Cordova to build mobile applications from HTML, CSS and JavaScript applications. When it came time to install all of the necessary components, I found it was not as straightforward as it could have been.

I managed to muddle my way through the installation process using bits and pieces of information gleaned from The Almighty Google; here is a break-down of everything I had to do to begin building with Cordova.

Note: This installation guide is relevant to Windows users.

Step 1: Install Node.js

Head over to https://nodejs.org/en/download/ and grab the latest version of Node.js. When it’s finished downloading, install it.

Step 2: Install Cordova

Open up a command prompt and run:

npm install -g cordova

npm is a JavaScript package manager which comes bundled with Node.js. In this instance, we are using npm to install the Cordova components. The -g flag is used to install the package globally.

Step 3: Install PhoneGap

Same deal as Cordova; From the command prompt, run:

npm install -g phonegap

Step 4: Install the Java JDK

Go to http://www.oracle.com/technetwork/java/javase/downloads/index.html and find the JDK download link. Yes, I know the web-page is horrible and there are a ton of “DOWNLOAD ME!” links. Pick the one labelled “JDK” without any bundled stuff. Download and install.

Step 5: Install the Android SDK

Visit https://developer.android.com/sdk/index.html#Other and download then run the Windows installer. Make sure and download just the SDK Tools as that’s all you need, unless you’re planning on using Android Studio.

Step 6: Install Apache Ant

You can get an installer from http://ant.apache.org/bindownload.cgi. Once it’s downloaded, unpack it to C:\ant.

Step 7: Fun with environment variables

The next step involves adding environment variables used to determine where the new applications and packages have been installed.

From the file explorer, right-click “Computer” and select “Properties“. Then click “Advanced system settings” and from the “System Properties” dialogue and finally, select “Environment Variables…” from the “Advanced” tab.

There are a few environment variables which you’ll need to add and they should all go into the System variables list. Note: Each value you enter will point to a directory on your PC. Make sure that each one does not end in a trailing slash.

  • JAVA_HOME
    The directory which Java JDK installed into. This will depend on which version you installed. For example, on my machine this is C:\Program Files\Java\jdk1.8.0_60
  • ANDROID_HOME
    The directory into which the Android SDK installed. On my PC this is: C:\Program Files\Android\android-sdk
  • ANT_HOME
    Assuming you’re following these instructions word-for-word, this will be: C:\ant

Once you’ve added those, you will need to update the Path system variable to include some new directories. Entries within Path are delimited with semi-colons so add the following to the end:

;%JAVA_HOME%;%JAVA_HOME%\bin;%ANT_HOME%;%ANT_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

And that should be about it. Next comes the fun of setting up Cordova applications, adding platforms and the like… but that’s another post, entirely! Just to get you started, though, here’s a list of core command-line operations:

  • Create a new app within the current directory:
  • cordova create hello com.example.hello HelloWorld

And then from within the generated app directory:

  • Add a platform (for example, Android):
  • cordova platform add android
  • List platforms:
  • cordova platforms ls
  • Remove a platform (for example, Blackberry 10):
  • platform remove blackberry10
  • Add a plugin:
  • cordova plugin add plugin_name
  • Build application:
  • corova build
Share Button