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