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

By choosing for Cordova as an App container, most developers aim to build an app that should run on the iOS and Android platform from one codebase. In the last post I demonstrated how to embed a javascript React App in Cordova on the Android platform, now I will do so for iOS (on a Mac).

A quick recap to make this work (repeating steps from former posts):

$cd $HOME/tmp

$mkdir blogpost

$cd blogpost

$git clone https://github.com/facebook/flux.git

$cd flux/examples/flux-todomvc

$npm install
#lots of installing here

In Part1 and Part2 (Android version) I used the ‘npm start’ command to create the concatenated javascript file bundle.js that is referenced in the index.html. Let’s use the alternative build command to create a minified version of the javascript bundle (more efficient because it deletes newlines, tabs and spaces).

$npm run build

Then for ol’ times sake, let’s use perl to replace the javascript bundle mentioned in index.html, as it defaults to the non-minified version (bundle.js), let’s use the minified version. (Afterwards, you can verify it all works by opening index.html in your browser from the filesystem).

$perl -p -i -e 's/bundle.js/bundle.min.js/g' index.html

Same as before, to embed the React app in a Cordova container, you need Cordova installed, a crossplatform app container.

Install it with:

$npm install -g cordova

Let’s make an empty cordova application

$cd $HOME/tmp/blogpost

$cordova create todomvcios nl.joustie.todomvcios "TodoMVCiOS"

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

$cd todomvcios/www

Now it’s time to add iOS support (this copies the built app and packages it for iOS)

$cordova platform add ios

Then create a build which we can run in the simulator.

$cordova build ios

We now can run the result in the iOS simulator:

$cordova run ios --emulate