Some notes on how to get Cordova installed & running on OSX in build iOS and Android Apps
This guide assumes you have the latest version of Xcode install and the associated Command Line Tools.
First we need a decent package manager installed, my preference is HomeBrew and the rest of this guide assumes that you have it installed.
If you don't here's how to get it installed:
Open a terminal and run the following command :
ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"
Note, the command above maybe have changed since writing, jump over to the HomeBrew site and double check.
Follow the promtps, and make sure you run the doctor command before continuing :
Now we have brew installed we can use it to install node.js, which is what we'll use to install Cordova and the rest of the deps for it.
brew install node
Now we can use node.js to install the Cordova package
sudo npm install -g cordova
You need the android SDK installed to develop Android applications, so use brew to install that :
brew install android-sdk
The android SDK depends on the Java Runtime. If you not used any Java applications on your Mac then none of the cordova android commands will work.
The easiest way to get the JRE setup is to execute the android command from the terminal :
You'll see the following image
Just click the Install button and let the installer do it thing.
Another package that's required, by cordova, is ant. This can be install via brew using :
brew install ant
Please Note - At time of writing either brew / Mavericks has an issue installing the ant package, it's reference is incorrect use the following command if it fails :
brew install https://raw.github.com/Homebrew/homebrew-dupes/master/ant.rb
Setup the Android SDK
Once the JRE in installed we need to setup an android device, which means we need to download the images for the version of android you want to dev against.
android command; this loads the Android SDK Manager which looks something similar to this :
By default the latest versions of the Android API, tools etc. are selected - I go with these normally. Click Install X Packages and follow the prompts.
Depending on your connection & selections you made, this might take some time.
Please Note - At the time of writing Cordova needed to have API v17 installed
Emulator Speed Issues (HAXM)
Please Note - Mavericks (10.9.x) isn't supported by the Intel HAXM. I've oped to use GenyMotion instead, if you're using Mavericks jump to the next section
The android emulator is painfully slow, the ARM emulation is the cause. In order to gain the best performance there are a few options, but I'm going to go through installing and using the Intel x86 Hardware Emulation (HAXM).
You could have selected the option from the SDK manager before now, but I wanted to keep it separate so I could walk through the setup. Select the HAXM package from the SDK Manager :
Despite having selected this option I find that the HAXM isn't available so additionally I installed the Intel Package from here and follow the installers prompts.
Create an Android Virtual Device (AVD)
Now we can create a new AVD to test our application on. Select Tools > Manage ADVs...
It's quite simple to create one from scratch but it's even simpler to use the Pre Defined Definitions. So that's what I'm going to do here.
Open the Device Definitions Tab and select one of the definitions listed, I selected Nexus 10, and click the Create AVD.. button. You should see something like this :
Set the target, I selected Android over the Google API as this exposes the Intel x86 Option :
Click OK to create the AVD and now you're ready to start the device.
Setting up GenyMotion/VirtualBox Emulation
In order to use GenyMotion you need to register, it's free so get over to GenyMotion and create an account.
Additionally, you need to have VirtualBox Installed.
Once these are installed, open GenyMotion and signin with your details. You will see a screen like this :
Please Note - You won't have any items in the top pane, I have already created the Galaxy S4 Device.
Select the type of device you'd like to emulate and click Add. GenyMotion will then automatically download and configure your selected device.
Once it's completed you can select your device from the main window and start it by clicking Play.
Note - there's no UI feedback but in a few ticks you'll see your Virtual device starting.
Create a simple HelloWorld App
Lets create and setup a HelloWorld app that we can use to test. Open a terminal, cd into a directory for your dev work and issue the following commands :
cordova create HelloWorld uk.co.net4orce.helloworld HelloWold
cordova platform add android
cordova platform add iso
If you followed the steps above you shouldn't see any errors from the above commands.
Prepare, Compile & Run - Android
To run the app on Android you first need to prepare & compile the Application.
Prepare - This is where cordova moves the nessasary files for the platform into place, ready for compliation
cordova prepate android
Compile - Will compile a prepared application
cordova compile android
These separate commands can be actioned via the build command :
cordova build android
Why have the seperate
compile commands? - Sometimes it's nessasary to alter the content of the prepared project before the compilation.
I'll touch on this in a follow up post where I reduce the size of the packages the mobile have to download when you publish to the different app stores.
Which ever of the methods you've used you should now be in a position to run the app for the first time. Issue the following command :
cordova emulate android
That's it! you should now see the default cordova app running in the emulator! Whoop!