In order to work with the Ionic framework version 2 there is a bit of software installs and configuration that needs to happen in order to deploy to devices. However, many of the guides out there leave out a number of steps that tripped me up when I first started using Ionic.

This guide will go through all of the steps needed for deploying to an Android device using a Windows machine. Note that deploying to an iOS device requires a Mac.

Since I love to automate setup work so that I can easily repeat it, we will be using Chocolatey and Boxstarter for all of the installs and configurations.

Software to be installed

Installing Software

Most of the software installs are automated using Chocolatey which is an awesome Software Package Manager for Windows. Chocolatey packages take care of downloading, installing, and configuring the software for you so that you do not have to worry about to do it.

Once you install Chocolatey we will be using a Chocolatey package called Boxstarter to take care of orchestrating the multiple installs with a single command.

  1. To install Chocolatey you need to open an administrative command prompt.

    • Go under the start menu
    • Type cmd
    • Find the command prompt result and ctrl + shift + click on it
    • If prompted, accept the User Access Control request.

  2. Run the following command in the command prompt you just opened

     @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

  3. After installing Chocolatey, in the same command prompt run the following command to install BoxStarter.

     choco install -y BoxStarter

  4. You can now close the administrative command prompt

Now that we have the infrastructure components installed we are ready to use Boxstarter to run our installation script.

  1. To run the script we need to run the Boxstarter Shell by clicking on the icon on your desktop

    • If the icon is not on the desktop, then open up a command prompt and type BoxStarterShell.

  2. In the Boxstarter Shell run the following command

     Install-BoxStarterPackage -PackageName  https://gist.githubusercontent.com/digitaldrummerj/3fe2eb057004b6742b89/raw/021eb3bb7e48745c68507904cecde1625ed0eac1/ionic2  -DisableReboots

    You can view the actual script in the your browser at link

Before we test if ionic is working or ot, we have one last bit of software to install which is an Android Emulator. Unless you plan on always deploying to a physical Android device during your development you will need an Android Emulator.

There are 2 options for the Android emulator:

  1. Visual Studio Android Emulator (Hyper-V Based)
  2. Genymotion (Virtualbox Based)

If you are using virtualization software on your machine other than Hyper-V be aware that VMWare and Virtualbox does not work when Hyper-V is turned on. It requires a reboot of Windows to turn Hyper-V off. {:.warning}

Both of the emulator works well but my preference is the Visual Studio Android Emulator.

Once you install one of the emulators, you will want to download at least 1 device. Both emulator platforms have Android machines from 4.4.0 to the current release.

Verify that everything works

  1. Open a command prompt

  2. Navigate the directory where you store you development projects (I use c:\projects)

  3. From c:\projects create a new project based on the Tabs template by running:

     ionic start todo tabs --v2

  4. cd into c:\projects\todo (directory was created by the ionic start command)

  5. The first test that we are going to run is to make sure that we can test the todo app that we generated in the web browser by running:

     ionic serve --lab
    • This will start up a node based web server and the –lab will tell it to launch a page that shows what the app would look like on an iOS, Android and Windows phone. Granted the node based serve is about 80% accurate but good enough to do a majority of our testing. Ultimately you should test on a device before releasing into the app stores.

  6. Next we are going to test our Android device setup but first we need to tell ionic that we want to add the Android platform to our todo app by running:

     ionic platform add android

  7. Now that the Android platform has been added we can build our application for the platform by running:

     ionic build android

  8. The last thing we need to verify is that we can deploy the todo app to the Visual Studio Android Emulator or a Physical device.

    • For the emulator you need to the emulated device before proceeding
    • For a physical device, you need to make sure that Windows sees that device and the USB debugging is turned on.

  9. To run on either the emulator or physical device run:

     ionic run android

Congratulations

Congratulations, you made it through the guide and have everything setup to create your ionic applications for Android devices. Unfortunately, if you want to develop for iOS devices you have to do it on a Mac since XCode only runs on a Mac.