avatarJustin James

☰ MENU
A web developer and speaker from Arizona

Ionic - The Ionicbox and How To Use It


Posted In: ionic, vagrant, and virtualbox

Time to Read: 16 mins

If you have looked at setting up the Ionic Framework or have it done it before, you know on much of a pain it can be, especially when something doesn’t work. Luckily, Ionic offers a free virtual machine called Ionicbox that is already configured with all of the software that you need.

Prerequisites:

Before you can use Ionicbox you need to install VirtualBox and Vagrant. If you are on Windows and using Chocolatey, you can install both using cinst virtualbox and cinst vagrant.

VirtalBox is a free virtual machine program. A virtual machine is a complete computer and operating system run from within your current operating system. It makes it possible to run Linux on a Windows Machine, Windows on a Mac, etc.

Vagrant is an easy way to manage virtual machines. A full explaination is out of scope for this article.

Ionic Box

Make sure that you installed VirtualBox and Vagrant before proceeding.

Installing

  1. Open Windows Explorer and create a directory where you want to hold all of your Vagrant configuration files

  2. Instead the directory created in step 1, create a directory called IonicBox

  3. In Windows Explorer, create the directory under the c drive called projects (i.e. c:\projects)

  4. In Windows Explorer, do a shift+right click on the IonicBox directory and select Open Command Prompt

  5. Run: vagrant init drifty/ionic-android

  6. Open notepad

  7. In notepad, open the VagrantFile created in the IonicBox directory.

  8. select all of the text in the VagrantFile and remove it

  9. Copy the following text into the VagrantFile

# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure(2) do |config|
 config.vm.box = "drifty/ionic-android"
 config.vm.hostname = "[Replace with what you want your Host Name to be]" # No Spaced Allowed
 config.vm.boot_timeout = 600
 config.vm.network :forwarded_port, host: 8100, guest: 8100
 config.vm.network :forwarded_port, host: 35729, guest: 35729
 config.vm.synced_folder "c:\\projects", "/home/vagrant/vagrant_projects"
 config.vm.provider "virtualbox" do |vb|
       vb.gui = true
       vb.customize ["modifyvm", :id, "--vram", "128"]
       vb.customize ["modifyvm", :id, "--usb", "on"]
       vb.customize ["usbfilter", "add", "0", "--target", :id, "--name", "android", "--vendorid", "0x18d1"]
       vb.memory = 2048
       vb.cpus = 2
       vb.name = "IonicBox"
       
       # Need This If On Windows
       vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]
 end
end

So what do all of those options in the VagrantFile mean?

In the configuration we configure the video and physical memory of the virtual machine. Since IonicBox is just a shell without a GUI, it doesn’t need a lot of resources, so we only give it 2 gigs of memory. Now if your host system doesn’t have a lot of memory, you will need to dial this down.

Ionic uses port 8100 for the web site and the live reload function use port 35729. We forwarded these ports from IonicBox to the host machine so we can access the web server. The following two lines do the port forwarding

config.vm.network :forwarded_port, host: 8100, guest: 8100
config.vm.network :forwarded_port, host: 35729, guest: 35729

The IonicBox is just a Linux shell with no GUI so you will want to use a feature in VirtualBox called Shared Folders to be able to edit the files from your host machine. In our case we are using c:\projects on the host machine which is linked to ~/vagrant_projects on the IonicBox

config.vm.synced_folder "c:\\projects", "/home/vagrant/projects"

Next we set up the VirtualBox options

vb.gui = false
vb.customize ["modifyvm", :id, "--vram", "128"]
vb.customize ["modifyvm", :id, "--usb", "on"]
vb.customize ["usbfilter", "add", "0", "--target", :id, "--name", "android", "--vendorid", "0x18d1"]
vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]
vb.memory = 2048
vb.cpus = 2
vb.name = "IonicBox"

Starting up the IonicBox and Getting logged in

  1. Open a command prompt and navigate to the IonicBox folder that contains the VagrantFile.
    • If on Windows, open the command prompt as an Administrator.
    • To open the command prompt as an administrator in Windows 8 go to the Start Menu Screen, type cmd, then ctrl+shift+click or ctrl+shift+enter
  2. Run command below. This command will take a while the first time you run it since it has to download the vagrant box container which is about 1 gig in size.
vagrant up

If you have the vb.gui = true in your VagrantFile, the first thing you will notice when you boot up the IonicBox is that it just comes to a command prompt and it leaves you wondering now what. Luckily, this is exactly what we want and it is very easy to manage it. The IonicBox basically just replaces the command prompt that we would normally use for all of the Ionic commands with a linux machine.

vagrant ssh

Testing the IonicBox

Now lets create our first Ionic project.

On the IonicBox ssh connection:

cd projects
ionic start firstApp tabs && cd firstApp
ionic serve

You now have a Ionic project in a directory called firstApp and the web server is running.

Open up your web browser and navigate to http://localhost:8100

You can view all of the files that make up this project on your host machine under c:\projects\firstApp

If you are NOT using Windows as your host operating system that we are done with configurations. Unfortunately, if you are using Windows as your host operating system, we have one more step to get npm working correctly, so that you can download all of the dependencies for Ionic.

WARNING: Unless you have npm 3.0+. This may not fix the issue with node and long file names on Windows with npm.

We need to setup a symbolic link for the node modules folder since windows has a length limitation when using shared folders. A symbolic link is basically a point from one directory to another. Windows has a directory name length limitation that we encounter when host our files through a shared folder. Since our npm dependencies (node modules) folder doesn’t need to be checked into source control, we can move it to a directory on the IonicBox and just point to that from within our Ionic projects.

On the IonicBox from the firstApp folder run the following commands:

mkdir ~/node_modules_[Your Project]
ln -s ~/node_modules_[Your Project] node_modules
npm install

Remember: If on Windows, you need to run the vagrant up command from an administrative command prompt.

You may also need to manually install bower

sudo npm install bower -g

I am done with IonicBox, now what?

vagrant suspend
vagrant halt
      
vagrant destroy

Conclusion

This is a nice easy way to get started with ionic without having to install much onto your current machine.

However, if you are going to spend a lot of time developing ionic applications, it won’t be long before you go down the route of installing everything onto your machine to do the development work.

Check out my installation guides to help you out:

Mac Installation

Windows Installation

comments powered by Disqus