Getting Started Building Mobile Apps with the Ionic Framework

Let’s learn how to start building mobile apps with the Ionic Framework. If you aren’t hip to Ionic, don’t worry. It is a relatively new framework. At the time this post was written the current version is: 1.0.0 beta 13, not quite release version, but pretty close.

Ionic comes to us from a cool company in Wisconsin named Drifty. If the name sounds familiar, they were also responsible for a hot little jQuery Mobile theme called Graphite. It gave jQuery Mobile apps a sorely need touch of class. Which makes them the perfect guys to  create the Ionic Framework.

Ionic is a framework for creating hybrid mobile apps. It sits on top of Cordova/PhoneGap and adds AngularJS and fast, sexy CSS3. With Ionic you create mobile apps with the web tools you know and love, yet they perform like native ones. If you don’t think so, check out some of the apps on the Ionic Showcase site,

The downside of Ionic especially when building Android apps is that you have to install a lot of tools just to get start: Java, the Android SDK, NodeJS, Cordova, etc. It is even worse if you are a Windows dev. But fear not brave coder. The good folks at Drifty have felt your pain and have a cure for what ails you, the Ionic Box. The Ionic Box is everything you need to build Android apps with Ionic – everything. Sorry, iOS devs, the Ionic Box doesn’t include any iOS tooling.  So let me show you how easy it is to get started. We are going to build a sample Android app, run it on the web and edit it with live reload. In the second part of this post, we will deploy our app to an Android device.


We need two apps before we can use the Ionic Box – VirtualBox and Vagrant. Since both are free they won’t make a dent in your wallet. You may also want to use the Chrome browser. It isn’t required but it has built in support for mobile web emulation which is pretty sweet for Ionic development.

Vagrant was something new for me. Essentially, Vagrant makes VirtualBox usuable by mere mortals. A fuller explanation is out of scope for us. Just head over to and install it.

VirtualBox from Oracle is a free virtual machine program. The easy way to describe a virtual machine, is it sets up a complete computer and operating system on your machine. It makes it possible to run Linux on a Windows machine, Windows on a Mac, etc. VirtualBox has been around and in use for a long time. It is available on pretty much every platform. If you haven’t installed it already just head on over to: and do so. If your machine supports 64 bits, be sure to get the 64 bit version of VirtualBox.

The Ionic Box

With our prerequisites installed. Head over to Drifty’s GitHub page for the Ionic Box at:

On the GitHub page, click the “Download ZIP”
Create a directory named, “boxdemo”
Copy the contents of the Download ZIP, our Ionic Box files, to the boxdemo directory
Inside of the boxdemo directory, create a directory named “project”

Modify the Vagrantfile

Vagrant allows us to modify its settings via its Vagrantfile which is simply a text file. Use a text editor to edit it. We need to make two modifications to it. The first, will allow us to use the live reload feature. Live reload, automatically reloads the current web page everytime it is editted. The second feature allows us to sync a folder on our host machine with one on the virtual machine. This we can edit files using our favorite text editors locally and sync the changes to guest machine.

In the Vagrantfile, find the following lines:

# Create a forwarded port mapping which allows access to a specific port
# within the machine from a port on the host machine. In the example below,
# accessing “localhost:8080” will access port 80 on the guest machine.
# “forwarded_port”, guest: 80, host: 8080

Below them add the following to lines: :forwarded_port, host: 8100, guest: 8100 :forwarded_port, host: 35729, guest: 35729

Ionic serve uses port 8100. We forward that port to the host machine so we can access the web server. The live reload function uses port 35729. By forwarding it, our browser will reload itself anytime we change a file.

Next, locate the following lines:

# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
# config.vm.synced_folder “../data”, “/vagrant_data”

Below them add the following line:

config.vm.synced_folder “project”, “/project”

This line sync a folder on the host machine with one on the guest machine. In our case we are sharing the project folder with a identically named project folder on the guest machine.

cd boxdemo
vagrant up

The vagrant up command will take quite a while to run the first time. So get yourself lunch or something and come back. Be patient.

Examine the output of the vagrant up command. We should see it forward our two ports: 8100 & 35729. We should also see it sync’ing our project folder.

Screen Shot 2014-10-04 at 3.37.08 PM.png

On the host machine (within the boxdemo directory):

vagrant ssh

This will gives us a terminal/command window into our virtual machine. This window is now running from within the guest machine. You will need to open another terminal window pointing at the boxdemo directory.

On the guest machine:

cd /project
ionic start boxdemo tabs

This will create an ionic app named boxdemo with a tabs user interface. Since we have the project directory sync’d, the project will be created on both the host and guest machine.

From the guest machine:

cd boxdemo
ionic serve

This will start the ionic web server with live reload. From the host machine, open your web browser and go to: http://localhost:8100. You should see your app.

On the host machine, using your favorite text editor open the file: boxdemo/www/templates/tab-dash.html.

We are just going to make a minor change to see if live reload is working. Inside the file, you should see the following lines:




Change the first line to:

Or something else and save the file. On web, you should see the “Dashboard” change to “Dasher bored” almost immediately.

Hopefully you gotten everything working. Getting started building mobile apps with the Ionic Framework using the Ionic Box is much easier than installing a half of dozen or more tools. Next time we will deploy our app to an Android device.


13 thoughts on “Getting Started Building Mobile Apps with the Ionic Framework

  1. Great post. They need to include these steps on the IonicBox github repo readme file. Without the info in this blog post, the IonicBox wasn't of any value to me. After following these steps, I am thinking about ditching my full blown Windows VM with Ionic on it.

    I did run into one issue when running on a Windows host was when I tried to run npm install on IonicBox for an ionic project. It had several errors complaining about symlinks. Luckily, I found a really simple fix for it. By default VirtualBox doesn't turn on symlinks and I just had to run VBoxManage to add it to the shared folder. Below are the steps.

    1. Shutdown the IonicBox
    2. Run “c:\program files\oracle\virtualbox\VBoxManage” setextradata “[Your VM Box Name] VBoxInternal2/SharedFoldersEnableSymlinksCreate/home_vagrant_vagrant_projects 1

    3. Validate by running: “c:\program files\oracle\virtualbox\VBoxManage” getextradataOn VM “[Your VM Box NameOn VM ]” enumerate

    4. Look for a line such as: Key: VBoxInternal2/SharedFoldersEnableSymlinksCreate/home_vagrant_vagrant_projects, Value: 1
    5. Run npm install from your project folder and you should no longer have the symlink errors.


  2. Great post. They need to include these steps on the IonicBox github repo readme file. Without the info in this blog post, the IonicBox wasn't of any value to me. After following these steps, I am thinking about ditching my full blown Windows VM with Ionic on it…..

    web apps developer


Leave a Reply to Mark Dawkins Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s