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.
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):
- A beginner friendly guide from the Treehouse team can be found at http://blog.teamtreehouse.com/install-node-js-npm-mac
- For a more advanced and detailed set of instructions check out http://www.johnpapa.net/how-to-use-npm-global-without-sudo-on-osx/
- Go on the node.js website https://nodejs.org/ and install node (which includes npm) from there
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:
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.
Setting up your development environment for building OSx apps is relatively straightforward.
- 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
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:
- Download the latest JDK (not just the JRE)from Oracle's website http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
- 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.
You can download it by choosing one of these two options:
- With brew by typing
brew install antin 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
Install Android Studio:
- Available at http://developer.android.com/sdk/index.html
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
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.
androidin 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:
android avdin your terminal. This should open the Android AVD manager
- Click the
createbutton and create an emulator device
Genymotion is a third party android device emulator. The reason for using it is that it's much faster than the Android one
- Signup, download and install Genynmotion at https://www.genymotion.com
- 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
- 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)
- 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.