Using Ember CLI with PhoneGap’s CLI Tools

For a recent project, a client wanted a mobile phone application that would work across both iOS and Android. As someone with more experience with web development than either iOS or Android, turning to Adobe’s PhoneGap seemed a fairly obvious path. I would be able to leverage more of my existing skill set, and could use awesome tools like Ember.js.

I started digging through some getting started guides for PhoneGap and quickly realized that the default platform and build management tooling (cordova-cli) had no support for any sort of asset processing. I’m not quite sure how I’d live without at least a CSS preprocessor, so I immediately started looking into integrating some sort of asset pipeline. I decided to use Ember CLI, since it provided a nice asset solution backed by broccolijs, a nice testing solution, and also allowed me niceties like the ability to upgrade ember trivially.

Tying Ember CLI into PhoneGap was easier than I expected, once I overcame a few initial hurdles.

1. Initial Project Setup

To start, I first generated a new project from cordova-cli by following the Command-Line Interface guide, and added my first platform (Android). At this point, I had a working PhoneGap demo application. Cool, but nothing special yet.

2. Ember Build Tooling

Now, we’ll need to actually get Ember CLI. The project’s getting started guide will be very helpful here. Next, we’ll need to instruct Ember CLI to build your newly-generated app into the www folder, where cordova expects to find it. Thankfully, this is shockingly easy, and requires only a single configuration option in the .ember-cli file at the root of your project:

  "output-path": "www"

3. Version Control Setup

If you’re tracking your project in version control (you should be), I suggest adding the contents of the www directory to your VCS ignore list. They should always be reproducible from the ember application’s source, and will change frequently. In order for the cordova-cli tools to recognize your project as valid, you will need to keep *some* www directory around, so I added a .gitkeep to my empty www directory.

4. Cordova Build Hooks

The cordova-cli tool gives you several build hooks you can use to run scripts throughout the build process. Unfortunately, I was completely and utterly unable to find a decent reference as to what each build step’s responsibilities are. After finding some decent examples and reading far more of the cordova source than I would’ve liked, I concluded that the “before_prepare” step was the ideal place to generate the ember app.

In order to get a fresh build of the ember application, all you’ll need to do is run “ember build”. The contents of the resulting hooks/before_prepare/build_ember_app.sh file are as follows:

if [[ $CORDOVA_CMDLINE =~ release ]]; then
  echo "Creating production build of ember app"
  ./node_modules/ember-cli/bin/ember build --environment=production
  echo "Creating debug build of ember app"
  ./node_modules/ember-cli/bin/ember build

Don’t forget to modify the script file’s permissions to be executable (+x)!

You now have a PhoneGap/cordova project that will correctly regenerate your Ember application for each rebuild! For local development, you can use something like the ripple emulator, which will regenerate your application on every page refresh, or you can use a command like cordova run to instruct the cordova-cli to rebuild your app and flash it to an emulator or device connected to your computer.

What lengths have you gone to in order to have nicer tooling available on your projects? Give me a shout in the comments.