You are here

Deploying Ionic apps to a Nexus 5 via a Linux VM on a windows host

Posted at 20:06 on Tue, 2nd September 2014 in mobiledev, ionic.

This post provides a mashup of different instructions required to get a development environment of the Ionic mobile framework setup in an Ubuntu VM running on a Windows 7 host connecting to a Google Nexus 5 over USB.

The specific setup is as follows: Windows 7 Ultimate with Service Pack 1 host running VMWare Workstation 10.0.2 with Ubuntu 14.04 LTS guest virtual machine.

You may have asked, why not just run everything in Windows? It's mainly because a lot of the documentation online is suited to an OS with a POSIX filesystem such as MacOSX or Linux. The other benefit is the MacOSX/Linux approach for development has built in repository systems that  (mostly) download everything for you with a few commands, instead of manually downloading everything from different sources. You may also ask, why the hec are you using Windows at all? Well games of course (but that's another discussion). Anyway, onto the guide:

Assumptions: you're familar with Linux and the terminal, and you already have an Ubuntu virtual machine (guest) built and booted up in Windows.

  1. Install some dependencies:
    $ sudo apt-get update && sudo apt-get update
    $ sudo apt-get install nodejs npm
  2. As per the Ionic "Getting Started" instructions, run the first two steps:
    $ sudo npm install -g cordova ionic
    $ cd ~/
    $ ionic start myApp sidemenu
  3. That last command will create a folder "myApp" which contains a template application. Feel free to make some test edits to myApp/www/index.html. You can test the application in a web browser by running:
    $ cd ~/myApp
    $ ionic serve
  4. If it all looks ok, cancel the ionic server by pressing 'Ctrl-C' in your terminal running the server. If that all works the way you expect, and you'd like to see the same thing on your Android device then we need to do a few more things.
  5. Setup your Nexus 5 device into developer mode, by going to Settings -> About Phone -> Build number (Tap the build number 7 times), and then go into developer options and toggle "USB debugging" on.
  6. On your Linux VM you'll need to install some libraries for building:
    $ sudo apt-get install ant openjdk-7-jdk libc6-i386 lib32stdc++6 lib32gcc1 lib32ncurses5 lib32z1
  7. We also need to manually download and install the Android SDK Bundle from android.com - once downloaded, unzip it into ~/andoroid-bundle
  8. As advised over on stack overflow, you need to add a few environment variables to your shell. Edit your local .bashrc and at least add the ANDROID_HOME, ANDROID_PLATFORM_TOOLS and additional PATH variables like so:
    $ vi ~/.bashrc
    export ANDROID_HOME="$HOME/android-bundle/sdk/tools"
    export ANDROID_PLATFORM_TOOLS="$HOME/android-bundle/sdk/platform-tools"
    export PATH="$ANDROID_HOME:$ANDROID_PLATFORM_TOOLS:$PATH"
    Then run the following to make the changes active:
    $ source .bashrc
  9. You should now have a number of new tools in your path, one of which is "android". Run this command, and let it run through any additional updates it needs to run. I also had to select the "Android 4.4.2 (API 19)" SDK platform item. When it finished, I quit and ran it again, and it continued with some more updates.
    $ android # Select Android 4.4.2 SDK Platform
    $ android # We run it a second time to make sure everythings updated
  10. You also want to run another new program in your path "adb", but firstly plug in your Android device via USB and then run it:
    $ adb devices
    If you don't see any devices listed, there are a number of other steps to follow to get your device working, I skipped most of those steps however. The only thing I needed to do was create the udev rules file "/etc/udev/rules/51-android.rules" - for my Google Nexus 5, I used the Google Vendor code (not LG even though they created the phone!):
    $ vi /etc/udev/rules/51-android.rules
    SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
    After making those change, give your Linux VM a reboot and then replug in your phone again. Then run "adb devices" again and you should see something with a random code listed for your phone.
  11. If you get back into your original test application and then attempt to build it:
    $ cd ~/myApp
    $ ionic run android
    You should then see console output showing the application compiling, and eventually it will attempt to push the app onto your phone - the application should pop up on your mobile automatically. If you don't see the application on your mobile, review the console output which may have some clues. The obvious one, will be if you haven't yet installed the necessary Android libraries in step 9.

Hope that can help someone out there, but feel free to comment if you get stuck or have a better approach to something.

If you still get stuck there's other options - only a few days ago, Ionic released a Vagrant based setup called Ionic Box, which does most (and probably more) of this stuff for you, check it out over on their blog.