Twitter: raymondcamden


Address: Lafayette, LA, USA

Ionic releases an easier path to Cordova / Android development

08-19-2014 5,379 views Mobile 8 Comments

I promise - I'm not turning into a complete Ionic fan boy, but if you want to call me an unofficial evangelist for them (especially since I don't do that for Adobe anymore), I certainly won't mind. This weekend I was working on the book I'm writing covering Cordova, and as part of that process I worked through the complete setup for doing Cordova development with Android. Most of the time I use iOS but for the book I wanted a platform anyone could use. In fact, I specifically did my testing in Windows since I know that many people use Windows and Cordova development has been a bit tricky there in the past.

It had been a long time since I went through the complete process. What I discovered is that while it is relatively straightforward, there are more steps than I remembered and you really need to pay attention or it is easy to screw up one of the prerequisites. I think my chapter does a great job of discussing this process, but as I said, it was surprising just how much you have to do to get up and running.

So I find this new post by the Ionic team to be very timely: Faster Hybrid Dev with Ionic Vagrant. I had some exposure to Vagrant at CFObjective a few weeks back but I had not actually used it for anything. Vagrant allows you to build development environments - think operating systems with applications and configurations - via a scriptable interface. What this means is - in an ideal world - a person can download a Vagrant image - set it up - and have everything ready to go. I've been through enough projects to know that something like this could be a huge timesaver.

To help with Android/Cordova development, the Ionic folks have released an Ionic Vagrant image. What this means is - after installing Vagrant - you can download their zip, unzip, and type vagrant up. And that's it. The first time you run this be prepared for a long wait. For me it took about 20-25 minutes, and during part of the process I saw some red error messages, but it eventually wrapped up at the end - I had a complete operating system.

With Android.

With Cordova.

And with Ionic.

Hell, screw Ionic (sorry guys!), even if you don't give a rat's mustache about Ionic, this is a huge timesaver in terms of getting up and running with Cordova. If you do decide to check it out, here are a few things to watch out for.

Number one - the commands to check for a connected device require sudo. This is covered on the GitHub and from what I can tell, you will run into this issue. Just do exactly as described:

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

And follow up with sudo /home/vagrant/android-sdk-linux/platform-tools/adb devices to ensure your device shows up.

Number two - how do you edit files? For my first test I used ed, but I wouldn't recommend that. (Old school MUD coder here - I used to be a wiz with ed.) Vagrant supports the concept of synced folders, which means you can edit using your preferred browser tools while the files are available to the Vagrant image as well. Thanks to Max Lynch for helping me out with this as I found the docs to be a bit weird. Here is how it works in a nutshell.

If you expanded the image zip to /Users/ray/Downloads/ionic-cordova-android-vagrant-0.1.1, then that folder is available on the image as /vagrant. So while SSHed into the image, I went to /vagrant and made a new Ionic project called android2. It showed up in Finder right way.

I opened this up in Sublime, edited, and went back in Terminal, and sent the project to my Android device. It felt completely the same as normal development. (To be clear, when I SSHed into the image, I did it via Terminal, and you end up ... in Terminal, so this is probably assumed, but I wanted to be clear this wasn't like a VMWare visual type thing.)

8 Comments

These comments will soon be imported into Disqus. To add a comment, use Disqus above.
  • Nick Collins #
    Commented on 08-19-2014 at 6:16 PM
    Personally, I'd like to see them create a version of Ionic that is more friendly toward non-app, browser-based development, something akin to jQueryUI but for Angular. While I know there is Angular-UI Bootstrap, I find Ionic to be a more elegant tool, for a more civilized time.
  • Commented on 08-19-2014 at 6:56 PM
    You can use Ionic w/o PhoneGap/Cordova. Is that what you meant?
  • Nick Collins #
    Commented on 08-19-2014 at 8:28 PM
    Yes, but it would be nice to have the generator able to generate a "web" project as opposed to just cordova projects.
  • Commented on 08-19-2014 at 8:34 PM
    Fair enough. File a bug report for it. :)
  • Commented on 08-19-2014 at 11:58 PM
    @Nick everything in www folder is basically a web project. Would there be something else you are looking for? You can always use typical angular scalfolding and drop Ionic js into it. I normally use Jekyll and do "serve --watch" in www folder anyways...
  • brian #
    Commented on 08-20-2014 at 2:41 AM
    Is there a Vagrant image for windows?
  • Commented on 08-20-2014 at 6:02 AM
    @Brian: Vagrant runs on multiple OSes. The image then should run just fine on Windows - although I didn't test it. I assume that's what you meant. If you really meant, can Vagrant do a Windows VM, then the answer is yes to that too. See some available images here: http://www.vagrantbox.es/.
  • Nick Collins #
    Commented on 08-21-2014 at 10:21 AM
    @Hawk I know it's possible, but that generates a lot of extra stuff I may not need or want. I was just saying it would be "nice" to be able to have option of having the generator only generate the www as a web project and leave out the mobile.