Part 2: Getting your app in a Cordova container (Android version)

When I wrote this part of the series, I started it on a Mac. Along the way I had to write some of it on a different computer, running Linux. So I decided to change the contents a bit of this post. I will still get the App in a container, but I will show it to you for the Android platform as well as iOS. Part 2 will therefore be split in two (an Android part and and iOS part). The reason for this is that it is nearly impossible to run an iOS simulator on Linux, so here you go.

So I will start with Android. You will have to make sure your development setup for compiling Android applications is correct. You can find pointers here

We will start with the React app built in part 1. The result of git clone should be located in $HOME/tmp/blogpost.

Remember when we built this React flux example app, we created a bundled version of all javascript in a file called bundle.js. It’s located in the js/ folder of the project and was created by running the build step ‘npm start’. I am mentioning this, because if you start with a fresh copy of the flux example, this build step needs to be performed for the app to work (the bundle.js is referenced in the index.html file of the project).

Let’s continue:

To embed the React app in a Cordova container, you need Cordova, a crossplatform app container.

Install it with:

npm install -g cordova

Then create the skeleton cordova application and copy the already created React app into it.

cd $HOME/tmp

$cd blogpost

$cordova create todomvc nl.joustie.todomvc "TodoMVC"

$cp -R flux/examples/flux-todomvc/* todomvc/www/

$cd todomvc/www

I don’t use the stock Android emulators that come with the SDK because they are just … too.. slow. Better to grab a copy of Genymotion that uses a Virtualbox virtualization and offers X86 Android (I have heard that the newest emulator that is included with Android Studio is also significantly faster, but I haven’t managed to test this out)

But.. this means you will have to compile for X86 as well, and not only for ARM cpu architecture. For this I used Crosswalk plugin to let the build phase also create X86 packages.

$cordova plugin add cordova-plugin-crosswalk-webview@1.2.0 
Fetching plugin "cordova-plugin-crosswalk-webview@1.2.0" via npm
Installing "cordova-plugin-crosswalk-webview" for android
joost@joost-Studio-XPS-1645:~/tmp/todomvc$ cordova build android
Running command: /home/joost/tmp/todomvc/platforms/android/cordova/build 
ANDROID_HOME=/home/joost//android-sdk-linux
JAVA_HOME=/usr/lib/jvm/java-7-oracle
Running: /home/joost/tmp/todomvc/platforms/android/gradlew cdvBuildDebug -b /home/joost/tmp/todomvc/platforms/android/build.gradle -Dorg.gradle.daemon=true
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
WARNING [Project: :] Current NDK support is deprecated. Alternative will be provided in the future.
Download https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library_beta/13.42.319.12/xwalk_core_library_beta-13.42.319.12.pom
Download https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library_beta/13.42.319.12/xwalk_core_library_beta-13.42.319.12.aar
:preBuild
:compileArmv7DebugNdk
:preArmv7DebugBuild
:checkArmv7DebugManifest
:preX86DebugBuild
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles UP-TO-DATE
:CordovaLib:preBuild
:CordovaLib:preDebugBuild
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl UP-TO-DATE
:CordovaLib:compileDebugRenderscript UP-TO-DATE
:CordovaLib:generateDebugBuildConfig UP-TO-DATE
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets UP-TO-DATE
:CordovaLib:generateDebugResValues UP-TO-DATE
:CordovaLib:generateDebugResources UP-TO-DATE
:CordovaLib:packageDebugResources UP-TO-DATE
:CordovaLib:processDebugManifest UP-TO-DATE
:CordovaLib:processDebugResources UP-TO-DATE
:CordovaLib:generateDebugSources UP-TO-DATE
:CordovaLib:compileDebugJava UP-TO-DATE
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:packageDebugJar UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:packageDebugJniLibs UP-TO-DATE
:CordovaLib:packageDebugLocalJar UP-TO-DATE
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:bundleDebug UP-TO-DATE
:prepareAndroidCordovaLibUnspecifiedDebugLibrary UP-TO-DATE
:preArmv7ReleaseBuild
:preX86ReleaseBuild
:CordovaLib:copyReleaseLint UP-TO-DATE
:CordovaLib:mergeReleaseProguardFiles
:CordovaLib:preReleaseBuild
:CordovaLib:checkReleaseManifest
:CordovaLib:prepareReleaseDependencies
:CordovaLib:compileReleaseAidl
:CordovaLib:compileReleaseRenderscript
:CordovaLib:generateReleaseBuildConfig
:CordovaLib:generateReleaseAssets UP-TO-DATE
:CordovaLib:mergeReleaseAssets
:CordovaLib:generateReleaseResValues
:CordovaLib:generateReleaseResources
:CordovaLib:packageReleaseResources
:CordovaLib:processReleaseManifest
:CordovaLib:processReleaseResources
:CordovaLib:generateReleaseSources
:CordovaLib:compileReleaseJava
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
:CordovaLib:processReleaseJavaRes UP-TO-DATE
:CordovaLib:packageReleaseJar
:CordovaLib:compileReleaseNdk
:CordovaLib:packageReleaseJniLibs UP-TO-DATE
:CordovaLib:packageReleaseLocalJar UP-TO-DATE
:CordovaLib:packageReleaseRenderscript UP-TO-DATE
:CordovaLib:bundleRelease
:prepareOrgXwalkXwalk_core_library_beta134231912Library
:prepareArmv7DebugDependencies
:compileArmv7DebugAidl
:compileArmv7DebugRenderscript
:generateArmv7DebugBuildConfig
:generateArmv7DebugAssets UP-TO-DATE
:mergeArmv7DebugAssets
:createXwalkCommandLineFileArmv7Debug
:generateArmv7DebugResValues
:generateArmv7DebugResources
:mergeArmv7DebugResources
:processArmv7DebugManifest
:processArmv7DebugResources
:generateArmv7DebugSources
:compileArmv7DebugJava
:preDexArmv7Debug
:dexArmv7Debug
:processArmv7DebugJavaRes UP-TO-DATE
:validateDebugSigning
:packageArmv7Debug
:zipalignArmv7Debug
:assembleArmv7Debug
:compileX86DebugNdk
:checkX86DebugManifest
:prepareX86DebugDependencies
:compileX86DebugAidl
:compileX86DebugRenderscript
:generateX86DebugBuildConfig
:generateX86DebugAssets UP-TO-DATE
:mergeX86DebugAssets
:createXwalkCommandLineFileX86Debug
:generateX86DebugResValues
:generateX86DebugResources
:mergeX86DebugResources
:processX86DebugManifest
:processX86DebugResources
:generateX86DebugSources
:compileX86DebugJava
:preDexX86Debug
:dexX86Debug
:processX86DebugJavaRes UP-TO-DATE
:packageX86Debug
:zipalignX86Debug
:assembleX86Debug
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 2 mins 17.031 secs

Then start Genymotion (I used the Galaxy S5 image).

When it has started, you can install the compiled package with:

$ adb install android-x86-debug.apk
1557 KB/s (38235054 bytes in 23.980s)
pkg: /data/local/tmp/android-x86-debug.apk
Success

If things went correct, you will find the todomvc application somewhere in you Apps.

When you start it: