5 min to a mobile app with Ember & Cordova
This is a quick guide for going from zero to a working app with all the bells and whistles like livereload, app icons and splash screens setup in about 5 minutes. If all goes to plan. ;)
Thanks to Ember Cordova project by Isle of Code, it has become super easy to build hybrid mobile applications using Ember and Cordova.
This guide assumes you are on MacOS and have the following basics set up already.
- Recent version of Node.js, Npm & Git
- Xcode & Android SDK
- Apple developer account set up
Setting up the project
First, let's setup the project and proceed to install some basics. Below you can copy paste the relevant commands.
npm install ember-cli -g ember new my-awesome-project cd my-awesome-project ember install ember-cordova
We have just created the basic Ember project with Cordova included. Ready to roll!
Next, we edit the
ember-cordova/cordova/config.xml and set up a proper identifier for your app replacing the generated one. It should look something like
com.company.appname for us it is
Then we need to change the default Ember config a bit to support Cordova. Let's modify the rootURL and locationType in
Make it look like the following:
rootURL: '', // default was '/' locationType: 'hash', // default was 'auto'
All set here. Let's proceed to add the icon & splash screen.
App icon and splash screen
Ok, I'll admit it, this part might take a bit more time if you don't have SVGs ready to go.
To setup the icon for the app, save you SVG logo to
ember-cordova/icon.svg. The icon should be a square. Then you can run
ember cdv:make-icons. And that's it for icons.
For the splash, place your SVG file at
ember-cordova/splash.svg and run ember cdv:make-splashes. Splashes will be resized and added to ther project.
The splash image has to support a lot of different screen sizes. You should download the splash SVG template provided by Isle of Code at http://embercordova.com/examples/safe-splash-template.svg. The image should have a background filling the entire area, and icons/text should be kept to the ‘safe area’ box.
Now we are ready to setup the platforms for deploying.
ember cdv:platform add ios ember cdv:platform add android
Before being able to build the application, we need to open Xcode and select the development team. Xcode needs this to be able to sign the code. You can open the project in Xcode using the command below:
Then in Xcode open the project and set the team on the 'General' tab. Once the team is set and it shows the Signing Certificate below, you should save the project and get back to the terminal.
Now we have a basic functioning application, which you can build for iOS and Android with the following commands.
ember cdv:build --platform=ios && ember cdv:open ember cdv:build --platform=android && ember cdv:open
Wohoo, done! Did it take more than 5 min? Probably the SVG part screwed you. Or then you ran into a mystical problem with something along the way. If you did, you should rage at us on Twitter.
Next, we move to the extra goodies.
This feature makes developing and testing Cordova's native features a piece of cake. Change some code, save your file & app reloads automagically on your phone. Developer bliss.
First you have to add the following line
<allow-navigation href="*" /> to your
ember-cordova/cordova/config.xml. Remember to remove this line for production builds.
ember cdv:serve ember cdv run --platform=ios --device
Pasting the above to your console should start your app in your phone with livereload enabled.
Nice Cordova plugins
Here's a few of our favourite Cordova plugins we find ourselves using time and time again.
This plugin lets you package a custom browser into you Android app, so the browser environment for your Cordova app stays the same independent of OS version. Pure gold for making testing on Android less painful. Adds quite a bit to the size of your app package though.
ember cdv:plugin add cordova-plugin-crosswalk-webview
This plugin provides information about device location.
ember cdv:plugin add cordova-plugin-geolocation
This plugin enables you to handle connectivity related things.
ember cdv:plugin add cordova-plugin-network-information
This plugin lets you configure how the status bar is displayed.
ember cdv:plugin add cordova-plugin-statusbar
This plugin lets you manage exactly how the links in your apps are opened. Many people seem to be fighting with opening links in system browser - this plugin helps with that.
ember cdv:plugin add cordova-plugin-inappbrowser
Keep plugins up-to-date
If you want to keep your plugins updated easily, you should check out cordova-check-plugins.
npm install -g cordova-check-plugins cordova-check-plugins --update=auto
Useful ember-cli addons
Below you will find some of the most useful Ember addons for developing mobile apps.
- Ember-cli-sass adds SCSS support
- Autoprefixer takes care of CSS prefixes
- Ember-gestures makes it easy to work with gestures and adds ember-hammertime to remove the 300ms tap delay
Install with the commands below:
ember install ember-cli-sass ember install ember-cli-autoprefixer ember install ember-gestures
You should consult http://embercordova.com/ if you're having trouble (maybe something changed) and if you're looking for more tips and tricks for building mobile apps with this stack.