Skip to content

Cordova

HTML, CSS, and Javascript as a Frontend

Options

  1. React with Cordova or React Native
  2. Vue.js with Cordova
  3. Ionic with Angular and Cordova
  4. Onsen UI, Sencha, Telerik, GapDebug, VoltBuilder, Monaca, Framework7, Quasar, and more with cordova
  5. Xamarin

Nearly all of these platforms still rely on Cordova as the basis of cross-platform frontend development, thus, we will concentrate on just using raw cordova for this tutorial.

Cordova

Installation

  1. Install Node.js . Provides node and npm (node package manager) CLIs* 
    1
2
3
    # Version should be >=16.13.0 for cordova version 12 (currently the latest).
node --version
npm --version
  2. Install git client
    • Provides git CLI and ability to pull node packages from git repos
  3. Install cordova module with npm
    • This is necessary cordova libraries for building cross-platform apps. 
      1
2
3
4
5
      # Mac/Linux
$ sudo npm install -g cordova
# nvm (Node Version Manager) is also an option to avoid sudo
# Windows
C:\> npm install -g cordova
Reference

Creating an App

  1. Create the app template directories and files

    • Options:
      • PATH: Where to create the project
      • ID: Reverse-domain-style package name - used in
      • NAME: Human readable name 
        1
        cordova create lightshow edu.redwoods.lightshow LightShow

  2. Enter created template directory and add deployment platforms

    • Platforms include: browser, android, ios, windows, and more. 
      1
2
3
      cd lightshow
cordova platform add ios
cordova platform add android

  3. Confirm and Install missing platform dependencies for building (Android, iOS, etc.) 

    1
    cordova requirements

    • Android:
      • Java JDK >= 11
      • Android SDK: Can be installed via Android Studio or standalone via these links:
      • Gradle: Best option is to install gradle and use it to install the gradle wrapper
        • Gradle 7.6.3 for Cordova 12 
          1
2
3
4
5
6
7
          sudo -s
mv ~/Downloads/gradle-7.6.3-all.zip /opt
cd /opt
unzip gradle-7.6.3-all.zip
cd ~/Development/lightshow/platforms/android
/opt/gradle-7.6.3/bin/gradle wrapper
./gradlew wrapper --gradle-version=7.6.3 --distribution-type=all
    • iOS (Must have Apple Device or use Github Actions)
      • macOS/Darwin installed
      • Xcode installed and license accepted
      • ios-deploy installed
      • CocoaPods installed (This is a ruby gem, so you may need to upgrade ruby components) 
        1
2
3
4
        sudo gem pristine ffi --version 1.15.5
sudo gem install drb -v 2.0.5
sudo gem install activesupport -v 6.1.7.6
sudo gem install cocoapods

  4. Configure Necessary Environment Variables

    • JAVA_HOME: 
      1
      export JAVA_HOME='/Library/Java/JavaVirtualMachines/jdk-19.0.2.jdk/Contents/Home'
    • Android SDK
    • If Android Studio utilizied, set these and ANDROID_SDK_ROOT 
      1
2
3
      export ANDROID_STUDIO='/Applications/Android Studio.app/Contents'
export ANDROID_HOME="${HOME}/Library/Android/sdk"
export ANDROID_SDK_ROOT="${ANDROID_HOME}"
    • If just using sdk and command line tools 
      1
      export ANDROID_SDK_ROOT="${HOME}/Library/Android/sdk"
    • Let your environment know where to find Gradle 
      1
2
      GRADLE_BIN="${HOME}/.gradle/wrapper/dists/gradle-7.6.3-all/aiqsy11zfh4dz5uu7slds59uo/gradle-7.6.3/bin"
export CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL="file://${HOME}/.gradle/wrapper/dists/gradle-7.6.3-all/aiqsy11zfh4dz5uu7slds59uo/gradle-7.6.3-all.zip"

  5. Build and Run the default Application

    • Modify your html, css, and javascript in the www directory to modify your app.
    • The index.html and index.js files hold the default application.
    • Before you build platform specific applications, you can test in your local browser. 
      1
      cordova run browser
    • Finally run on your device 
      1
2
3
4
5
      cd ~/Development/lightshow
cordova build android
cordova build ios
cordova run android
cordova run ios
    • If you plug in an Android device, you can use the command-line tools, specifically adb to list the installed devices before using the cordova run command.
      deploy to local device
      1
2
      adb devices
cordova run android