Ionic Box, a Vagrant Configuration for Hybrid Mobile Apps

By Aldo Ziflaj

Vagrant is a tool for creating and managing virtual environments that helps many developers not have to care about the “works on my machine…” problem.

Vagrant creates reusable development systems that can be used again and again, helping you keep your system clean of too many installations.

If you are interested, SitePoint has plenty of vagrant articles and tutorials that might come in handy.

I am going to talk about a Vagrant configuration for developing mobile hybrid applications with the Ionic Framework.

Vagrant for mobile apps?!

I was surprised when I found out to! I’ve seen Vagrant used mainly in web development. With frameworks such as Laravel, Phalcon and even CMSs such as WordPress, but not used for mobile development.

Even so, the Ionic guys have managed to create this Vagrant configuration perfect for our use.

For iOS developers, Ionic Box won’t do much for you right now as Ionic Box cannot be used for iOS development for a variety of legal reasons. However, it’s great for Android development.

Setting up with Ionic Box

To get the Ionic Box, you must have Vagrant and VirtualBox installed.

After making sure you have those, execute

vagrant init drifty/ionic-android
vagrant up
vagrant ssh

This will download the vagrant configuration files, start the virtual machine and connect you to it. The first time you run this, it will download Ubuntu 14.04 (Trusty Tahr) with these applications installed:

  • Node.js
  • Git
  • Java SDK 7 update 65 (OpenJDK7)
  • Apache Ant
  • Android SDK
  • Cordova
  • Ionic Framework
  • Expect

This process will take some time, so be patient.


Now that the Ionic Box is up and running, you can start using Ionic Framework to write your mobile hybrid application for Android.

After setup

I am not going to create a new application. Instead, I will use one of the templates that Ionic supplies, the tabs template.


ionic start TabsDemo tabs
cd TabsDemo
ionic platform add android

The first command creates a project called TabsDemo from the tabs template and then adds the necessary files and configuration to make it an Android app.

To run the application, use

ionic run android

and it should build the application for Android and then install it in the device.

If you have any problems with your Android phone, such as the vagrant VM not recognizing it, or any other permission problem, try restarting the adb server by executing

sudo /home/vagrant/android-sdk-linux/platform-tools/adb start-server
sudo /home/vagrant/android-sdk-linux/platform-tools/adb kill-server

You can find the source files in both vagrant and your local machine. On vagrant, you must place them in /home/vagrant/, while on the local machine, you can find them in the same directory where you placed the vagrant configuration file, i.e. Vagrantfile.

You can use any IDE you want for writing your application, but I would recommend WebStorm (if you are willing to pay its price).

Since Ionic uses Cordova to port apps into mobile platforms, you can use Cordova plugins easily by using ngCordova. Let’s look at an example with the BarcodeScanner plugin.

You can add the plugin by executing

cordova plugin add

It can then be used in your code like this:

module.controller('BarcodeScannerCtrl', function($scope, $cordovaBarcodeScanner) {

  $scope.scanBarcode = function() {
    $cordovaBarcodeScanner.scan().then(function(imageData) {
      // Success! Barcode data is here

    }, function(err) {
      // An error occured.
      // Show a message to the user



Vagrant may be difficult to understand sometimes, but is worth pursuing as it can be exceptionally useful. If you are tired of configuring your machine for every project you have, then vagrant is the right tool for you. If you face problems while configuring your machine, then using a prepackaged vagrant box is the best answer to your problems.

With this introduction you don’t have to install all the tools for Android development. Say goodbye to Android SDK and say hello to Ionic Box.

  • Francis


    throw e;


    ERROR : No emulator images (avds) found, if you would like to create an

    avd follow the instructions provided here:

    Or run ‘android create avd –name –target ‘

    in on the command line.

    Error: /home/vagrant/projects/TabsDemo/platforms/android/cordova/run: Command failed with exit code 8

    at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23)

    at ChildProcess.EventEmitter.emit (events.js:98:17)

    at maybeClose (child_process.js:743:16)

    at Process.ChildProcess._handle.onexit (child_process.js:810:5)

    But dont create

    $ android create avd –name avdNexus –target 1

    Valid ABIs: no ABIs.

    Error: This platform has more than one ABI. Please specify one using –abi.

  • Aldo Ziflaj

    Hi Francis. I didn’t get this error actually, I used my Android phone instead of an emulator. Probably you will get a better explanation if you file an issue

    Also, I saw that someone (issue 22) had no problem using the Genymotion emulator, so give it a try

    • Francis

      Hy Aldo, I execute ionic on device and have successfull!! :) Great!
      Necessary modify line in `.profile` file:

      export ANDROID_HOME=`brew –prefix android`



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Mobile, once a week, for free.