Troubleshooting Ember-App-Kit on PhoneGap

Today I spent a good couple hours googling around and browsing StackOverflow, hoping that someone else had had the same issues. You see, it seems pretty straightforward, but there’s a catch. There’s always a catch.

I won’t go over setting up PhoneGap or how to run the app in your device. This are some punctual issues I’ve had and how I fixed worked around them.

1\. Awkward flow

Since I had my app folder in the root of my project:

├── app
│   ├── Brocfile.js
│   ├── app
│   ├── bower.json
│   ├── config
│   ├── dist
│   ├── node_modules
│   ├── package.json
│   ├── public
│   ├── tests
│   ├── tmp
│   └── vendor
├── hooks
│   └── README.md
├── merges
│   └── ios
├── platforms
│   └── ios
├── plugins
│   └── ios.json
└── www
    ├── assets
    ├── config.xml
    └── index.html

I had to cd into app, build, go back, move stuff over to www, rebuild with phonegap. So I ended up with a simple makefile that makes my life easier:

all: clean build copy build-gap

build:
    cd ./app && ember build production && cd ..

build-gap:
    phonegap build ios

copy:
    cp -r ./app/dist/* ./www

run:
    phonegap run ios

logs:
    tail -f -n 100 ./platforms/ios/cordova/console.log

clean:
    rm -rf ./www/app ./www/assets ./www/tests
    rm -f ./www/index.html

And now building everything is just a make away. Or make run to check it on the phone.

2\. Couldn’t load assets (Failed to load resource)

My assets were all over the place. In every distribution folder, in the iOS Simulator temp files. Everywhere. Nonetheless, they couldn’t be reached from the app, despite that ember server made everything work on the browser.

The problem was this:

<base href="./">

By having it set to href="/", the app was trying to get the assets from the root of the file system and of course failed. This seemed to solve the issue and didn’t interfere with the Ember app at all.

3\. Application Bootstrapping

I ran into the issue that even though the application was being created, it didn’t kickstart the routing. So the last script in my index.html ended up looking like this:

<script>
      document.addEventListener('deviceready', function (id) {
        console.log('Received Event: ' + id);
        window.App = require('app/main')['default']('app');
        Ember.run.next(function(){
          App.__container__
            .lookup("controller:events")
            .transitionToRoute("/");
        });
      }, false);
</script>

Where events is the root controller.

4\. Using a custom RESTAdapter (Change DS.Store’s default Adapter’s URL)

This one was easier since the ember-app-kit and the github issues point to some useful commits.

I ended up creating app/adapters/application.js with the following content:

export default DS.RESTAdapter.extend({
  host: window.ENV.apiUrl+'/api',
  headers: {
    "Accept": "application/json, text/javascript; q=0.01"
  }
});

Where apiUrl is set to localhost:3000 on development and the production host on production.

Conclusion

That’s been it so far. I’m documenting this here so that it doesn’t happen to me again, but perhaps it’s of use for someone else looking to fix these issues.