/ android

Setting up your Mac OSx for Ionic

I've recently started exploring the amazing world of the Ionic framework. I was surprised to see how many of the steps required for the setup are left out from tutorials on the internet, so I made a collection of the steps required to actually start building with Ionic.

Ionic is a framework that allows to develop mobile apps by using HTML5, CSS (or Sass) and Javascript.

The getting started guide and the rest of the documentation on the Ionic website is pretty well developed and easy to understand. However, if you haven't been developing for mobile apps already, you'll need to go through some extra steps. A combination of this blog post, stack overflow and googling each specific error message is what did it for me. So here is a detailed list of the steps I followed:

Step 1 - Install Homebrew, Node.js and NPM

It may be confusing for a beginner to understand why you need to install so many things. The simplest answer is that these are package managers that simplify the installations of the components you'll need and decrease the chance of errors.

To install Homebrew, Node and NPM: choose and follow one of these tutorials (note that they're somehow overlapping):

Step 2 - Install Ionic, Cordova and Gulp

Assuming you've installed npm correctly, this is as simple as opening your terminal and running this command:

  • Type npm install -g cordova ionic gulp

At this point you have everything you need to get started. In fact, Ionic gives you some really good testing options such as the command ionic serve and the ionic view app.
However, if you'd like to emulate or build iOs or Android devices, more steps are required.

iOs setup

Setting up your development environment for building OSx apps is relatively straightforward.

Install xCode:

  • Install xCode from the App Store. The file is quite large in size (we're talking about more than 2gigabytes), so make sure you're on a good connection and can keep the computer on for the required time.
  • Once the download finishes, make sure to open it and accept the license agreement

Install ios simulator:

  • Install the ios simulator in your terminal by typing npm install -g ios-sim

Android setup

Setting up for Android requires quite a few steps and installing a number of components. Here are instructions for all the components you might need.

Install Java development Kit:

  • You might need to update your ~/.bash_profile to include export JAVA_HOME=$(/usr/libexec/java_home). Note that each time you change your bash profile you should restart the terminal to apply the changes.

Install Ant:
You can download it by choosing one of these two options:

  • With brew by typing brew install ant in the terminal
  • You can download it directly from http://ant.apache.org/bindownload.cgi . You will also need to update the .bash_profile to something like export ANT_HOME=/users/[YourUsername]/Development/apache-ant-1.9.6

Install Android Studio:

Install the Android SDK.
You can choose one of these options:

  • Install Android SDK with brew brew install android-sdk
  • Install the Android SDK at https://developer.android.com/sdk/index.html#Other . In this case you will also need to update your .bash_profile to something like export PATH=${PATH}:/users/[YourUsername]/Development/android-sdk-macosx/tools:/users/[YourUsername]/Development/android-sdk-macosx/platform-tools:${ANT_HOME}/bin

Download the Android Api:
Ionic will likely expect you to have a specific Android API installed. If you get an error when building a ionic project in Android that asks a specific API version (it was 22 in my case), you can download it by following these steps.

  • type android in your terminal. This should open the Android sdk manager
  • download and install all files related to that API number (such as API, SDK platform, images, etc.)

Prepare the Android emulator:

  • type android avd in your terminal. This should open the Android AVD manager
  • Click the create button and create an emulator device

Install Genynmotion:
Genymotion is a third party android device emulator. The reason for using it is that it's much faster than the Android one

  • Open it and sign in
  • Create a device

You're all set!

At this point you should have installed everything you need. To check this, follow the getting started with Ionic instructions.

Start a basic ionic project:

  • type in your terminal ionic start myApp tabs
  • enter the project folder by typing cd myApps

Try iOs:

  • Add iOs to your project by typing ionic platform add ios
  • Build it ionic build ios
  • Emulate it ionic emulate ios
  • Run it ionic run ios (to do this you will need to pay to get an Apple Developer license)

Try Android:

  • Add Android to your project by typing ionic platform add android
  • Build it ionic build android
  • Emulate it ionic emulate android (this will use the default android emulator)
  • Run it ionic run android. Here you can use Genymotion by making sure you started the Genynmotion device before running the command. Alternatively, plugin an Android device with a usb cable (more info)

I hope this is useful! Let me know if I missed any steps or something is not up to date.

Marco Viappiani

Marco Viappiani

In this blog I like to talk about my experiences with software development, triathlon and more.

Read More