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:

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

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.
 

Conversation
  • Michael Harrington says:

    Or you can use ember-cli-cordova, which, if you follow the instructions in this issue, even works with the PhoneGap developer app, so you can get livereload on your device as well.

    • Mitchell Johnson Mitchell Johnson says:

      I stumbled across ember-cli-cordova purely by accident last week, and was pretty impressed. When I was initially setting up my ember/cordova project, I hadn’t even thought to drive the cordova compilation from ember-cli.

      I think that for my current project, I’ll probably stick with the solution outlined in this blog post. We’re developing some custom plugins along with the application, and having the flexibility to cleanly separate the responsibilities of the per-device build and the web app build has come in handy.

      Should I end up writing another ember/cordova app in the future, I’ll definitely take a closer look at ember-cli-cordova. Thanks!

  • Maulik Bengali says:

    I believe, there are 2 configs (config/environment.js) important in order for this to work.

    1. locationType : none
    2. baseUrl should not be set

    • Mitchell Johnson Mitchell Johnson says:

      You are absolutely correct. I had totally forgotten about adding those configuration variables when I was setting up my project. Thanks!

  • Ale Paredes says:

    Your post has been really helpful. Thanks!
    I managed to get Phonegap and ember partially running, like templates, routing, etc. But if I tried
    to actually use the Phonegap API I have a lot of problems. Do you have any tips for that part?

  • I believe in order to use the Phonegap API, you’ll need to include the cordova.js that gets generated when the project is first generated with the tools. That file is the js bridge that allows access to the native hardware.

    It will look something like this in the index.html file that the project creates:

    Hope this helps someone. It’s an exciting topic to build hybrid apps using Ember…

  • Comments are closed.