How to setup an environment for Cordova

Complete Cordova App with Angular JS tutorial

This part covers set up an environment to build the app. Building an app for iOS, Android or indows can be done with Cordova. To use Cordova it needs to be installed with NodeJS. Because Cordova uses Git, we need to install this too.

To build an app for Android the Android SDK is needed. Cordova and the Android SDK need Java and Ant.

Install NodeJS

To install Cordova, we need NodeJS. Download NodeJS install package from http://nodejs.org and run the installer.

After the NodeJS installation is complete, open a terminal on OS X or a command line on Windows and execute the following command:

node --version

If the installation was successful this command shows the version of NodeJS that is installed on your system.

Install Git

Git is a version control system that is used by Cordova. Download an installation package from https://git-scm.com/downloads and run the installer.

Install Cordova

With the Node Package Manager (NPM) we can install Cordova.

on OS X
To install Cordova globally with -g, sudo is required.

sudo npm install -g cordova

on Windows

To install Cordova globally use the -g.

npm install cordova -g

If the installation was successful the next command should give the installed version of Cordova:

cordova --version

Install Java

The Android SDK needs Java to be installed. The minimal version of Java to be installed is 1.6. Check your version:

javac -version

If no version or a lower version is installed, download and install the latest Java version

on OS X
Download and install from https://support.apple.com/downloads/java

on Windows

Download and install from https://www.oracle.com/technetwork/java/javase/downloads/
Find the installer file for your system. If you run a 32-bit Windows, download the Java SE JDK x86 installer. If you run a 64-bit Windows version, download the 64-bit installer and execute it.

Next update your PATH variable for JDK on Windows. Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.
In the User variables, choose PATH and click edit, or create a new one. At the end of the field Variable value add the next line (including the semicolon as first character):

;C:\Program Files\Java\jdk1.8.0_11\bin

Make sure the path is correct for your machine.
If all is set, click OK.
Then add a new variable, if not already exists, by clicking ‘new’. Enter ‘JAVA_HOME’ as the name and as value:

;C:\Program Files\Java\jdk1.8.0_11

Then click OK.
Open a new command line and check if java is installed:

javac -version

Install Ant on OS X
Install Homebrew to install Ant
Check the version of Hombrew with:

brew --version

If Homebrew is installed, update to the latest version:

brew update

If Homebrew is not yet installed, download and install from http://brew.sh/.

Install Ant with Homebrew

brew install ant

Install Ant on Windows
Download Ant from http://ant.apache.org/bindownload.cgi.
Unpack the zip file where you want Ant to be installed. For example

C:\Users\HolleBM\ant

The files of the zip should go directly to this folder.

Ant also needs to be added to the PATH variable.
Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.

In the User variables, choose PATH and click edit.
At the end of the field Variable value add the next line (including the semicolon as first character):

;C:\Users\HolleBM\ant\bin

Make sure the path is correct for your machine. If all is set, click OK.

Then add a new variable, of not already exists, by clicking ‘new’. Enter ‘ANT_HOME’ as the name and as value:

C:\Users\HolleBM\ant

Then click OK, and click OK again to close the Environment Variables window.

Check if installation was successful

ant -version

Install the SDK to build an app for Android
on OS X

Download the Android Developer Tools (Eclipse ADT) from developer.android.com/sdk and unpack to a location of your choice. For example in

/Users/HolleBM/android/

Add the path of the location to your .bash_profile in your home folder. Put the next command in a terminal to go to your home folder

cd

Open this folder with

open .

Search for the file called .bash_profile and open it in your favorite editor. If it does not exist, create a new file and add the following line


export PATH=/usr/local/bin:/Users/HolleBM/android/sdk:/Users/HolleBM/android/sdk/platform-tools:$PATH
1
export PATH=/usr/local/bin:/Users/HolleBM/android/sdk:/Users/HolleBM/android/sdk/platform-tools:$PATH
If the .bash_profile file already exists, open it and add the path where the ADT is unpacked to the PATH variable at the end of the file. Leave the existing lines as is. This is needed for Cordova to find the Android SDK


export PATH=/Users/HolleBM/android/sdk/platform-tools:/Users/HolleBM/android/sdk/tools:$PATH
1
export PATH=/Users/HolleBM/android/sdk/platform-tools:/Users/HolleBM/android/sdk/tools:$PATH
Now check if installation was successful, run the following in your terminal


adb version
1
adb version
Open the SDK manager with


android
1
android
To install the required Android versions for Cordova, leave all selected presets as is and, depending on the Cordova version you use and the Android versions your app should support, select the required Android versions to install.

on Windows

Goto developer.android.com/sdk and search for SDK tools package and download Android SDK for Windows (The complete studio is not needed, downloading only the installer_r24.4.1-windows.exe file will do). During installation copy the path where the SDK is installed, to add to your PATH variable.

Open the Control Panel, click System and Security, click System, click Change settings, which will open the System Properties window. Select the Advanced tab, then click the Environment Variables button.

In the User variables, choose PATH and click edit.
At the end of the field Variable value add the next line (including the semicolon as first character):


;C:\Users\HolleBM\AppData\Local\Android\android-sdk\tools;C:\Users\HolleBM\AppData\Local\Android\android-sdk\platform-tools
1
;C:\Users\HolleBM\AppData\Local\Android\android-sdk\tools;C:\Users\HolleBM\AppData\Local\Android\android-sdk\platform-tools
Make sure the paths are set correct (the code example is fictional).

Now check if installation was successful, run the following in a new command line window


adb version
1
adb version
Open the SDK manager with


android
1
android
To install the required Android versions for Cordova, leave all selected presets as is and, depending on the Cordova version you use and the Android versions your app should support, select the required Android versions to install.

Install the SDK to build an app for iOS
Building iOS apps on Windows is not supported by Windows.
On OS X, download Xcode from the iStore, install it.

Result, so far…
We have an Angular JS app, with a menu with which we can navigate (route) to 3 different pages.

We can get data with AJAX from a server backend and show this in a page.

And we now have an environment to build apps with Cordova

What’s left to do:

Build an Android and an iOS app with Cordova