Configuring Cordova for Android Development on Linux

This is the hard part. Let’s get it out of the way.

Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores. — Cordova website

This article assumes you are a web developer who wants to build an Android app with the knowledge you already have. In order to successfully take your web skills to the Android level, you need to jump through a few hoops.

Per the title, this article also assumes you are on a Linux-based system.

Warning: Android Studio takes up gobs of storage, so make sure you have some to spare.

Java Development Kit

Download a copy here. Make sure you choose the tarball (*.tar.gz).

Once the download has finished, move to your desired location and extract the files:

$ cd /usr/local
$ sudo mkdir java && cd java
$ sudo tar xzvf ~/Downloads/jdk-*****_***.tar.gz

We need to add this extracted folder to the system path. This is accomplished by updating the ~/.bashrc file with an editor (vi, vim, nano, etc.).

$ cd ~
$ vim .bashrc

Add these two lines to the bottom of the file (make sure to replace *** with the correct number that matches your directory path).

export JAVA_HOME="/usr/local/java/jdk1.8.0_***"
PATH=$PATH:$JAVA_HOME/bin

Reload bash and confirm the updates worked:

$ source .bashrc
$ javac -version      # should print 'javac 1.8.0_***'

Fantastic, one down.

Android Studio

Download a copy here. This one might take a while.

Move back to the desired location, unzip the files, and execute the script.

$ cd /usr/local
$ sudo unzip ~/Downloads/android-studio-ide-***.zip
$ cd android-studio/bin
$ ./studio.sh

The Android Studio Wizard will open and you can click Next on everything. Now, this one really is going to take a long time.

When the download finishes, click Finish. On the next screen click Configure > SDK Manager in the bottom right. Select the top three or four SDKs and then click next (you can choose less if you’re running low on storage).

Again, you’re going to wait. When it finishes, close the Android Studio window. This will also kill the terminal instance.

We are going to update ~/.bashrc again to add Android to the system path.

$ cd ~
$ vim .bashrc

Add these three lines to the bottom of the file (assuming you chose in the Android Studio Wizard to install to $HOME/Android/Sdk, otherwise change that to your custom path).

export ANDROID_HOME="$HOME/Android/Sdk"
PATH=$PATH:$ANDROID_HOME/tools
PATH=$PATH:$ANDROID_HOME/platform-tools

Two down! With this we should be at the end of the (more) difficult part.

Gradle

Install with:

$ sudo apt install gradle

Cordova

Install with:

$ npm install -g cordova

Last call

At this point we have to go on a slight detour. Unfortunately, we can’t confirm whether or not everything is configured properly until we have a Cordova project. But believe me, you want to do this.

Create a new temporary Cordova project:

$ cordova create reqTest
$ cd reqTest

Add Android to the list of platforms:

$ cordova platform add android

This is where the magic happens. It all comes down to this. Have you done everything correctly? Have I told you everything to do? Let’s find out.

Type one final command into the terminal:

$ cordova requirements
# Correct response
Android Studio project detected
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: installed android-27,android-26
Gradle: installed /usr/share/gradle/bin/gradle

If your output does not look like this, then we’ve made a mistake somewhere. Take a look at which installation is having issues and review those steps. If you tried everything you can, give me a shout. I can’t promise I have the answer, but I promise I’ll help you find one.

But if it does look like that then BOOM, you’re ready to rock’n’roll. Now we can do some house cleaning:

$ cd ..
$ rm -r reqTest

Last last call

I hope you’ve learned as much as I have. This article is part of a series for building an Android app with the Quasar Framework, however your new Cordova installation can be used with any and all code written in HTML, CSS, and JS.