This post assumes that Node JS and NPM are installed in your system. I’m also using Windows 8 so your file path may vary.
The second part is the installation, or at least having the proper environment and/or SDK that the Cordova can communicate with. This part takes the longest and where there’s headache involved if you’re not familiar with the process. The third part is the tooling which uses a combination of command line (to serve, deploy, emulate, etc.) as well as the actual IDE to write the code with.
This blog post is not meant as a exhaustive guide as there’s tons of information involved. I will focus on the 3 main parts of the installation and will try to be as focused and straightforward as possible.
1. Ionic framework setup
To install Ionic and Cordova globally using NPM.
npm install ionic cordova -g
2. Environment setup
If you are developing in Android like I am, you will have to install a few things. First and foremost, you will need the Java SE Development Kit. The next step is to install the Android SDK. I chose to use the Android Studio which includes the tools+ the SDK. Next is to install WinAnt which is a Windows installer for Apache Ant. Apache Ant is a Java command line tool that will be used to build the *.apk file for deployment to an actual Android device.
After the installation, the Android environment variable will need to be added to the system path for easy access. This can be set in the control panel > system > advanced system settings > environment variables > path.
You will also need to add the Android package to build with. This can be done through the Android SDK Manager and by selecting and downloading the versions.
Alternative: Ionic Box
I won’t go into the details of using Ionic Box but it’s an alternative. Ionic Box is a lightweight ready-made environment to avoid the hassle of configuring Java and Android SDK altogether in a Windows environment. It requires VirtualBox and Vagrant to simulate an environment for building with Ionic and Cordova. The VirtualBox is a tool to create quick virtual machine environments and in conjuntion uses VirtualBox for the VM itself.
After you have downloaded Vagrant from GitHub, you can use the command prompt to get into that directory then type the following command to run, download and setup the environment. This will install a Ubuntu VM and configure it within VirtualBox itself. (note that this might take some time at first as this will download a few dependencies to run the environment)
3. Tooling and Ionic commands
To create a new app. Template options are blank, tabs (default) and sidemenu
ionic start <app name> <optional template name>
To configure the platform for Android (ios if you’re building for iOS)
ionic platform add android
To change the URL on where to serve up the environment
Basic Ionic commands available
To test and make sure that everything has been installed properly as far as communicating with the emulator is concern (adb = Android Debug Bridge), open the command prompt and type
To build. This step is required prior to emulating or running on actual device. This creates the *.apk files.
ionic build android
The command for spinning up an Ionic server instance
In addition, if you want to launch a side-by-side iOS and Android browser emulation
ionic serve --lab
There’s a project called Ripple Emulator which allows you to emulate on different devices via Chrome, you can install it via NPM, then run it.
npm install -g ripple-emulator ripple emulate --path platforms/android/assets/www
To emulate in the Android environment and launch the app.
ionic emulate android
To run on an actual device (it will fallback to running on emulation mode if a device is not detected).
ionic run android
If you’re using Visual Studio as your IDE, there’s Visual Studio tools for Apache Cordova which has some built-in tools for debugging, emulating, creating new mobile project, etc. I also discovered the Telerik AppBuilder last week which I personally haven’t tried yet. I will have to do a trial and see if I find it beneficial to quickly build an app.
Lastly, if all you care about is just building the app and is OK with debugging in the browser, all you need is an IDE like Sublime or Webstorm.
On my next post, I will focus on the actual development in Ionic. I hope that you find this helpful and informative. Feel free to contact me for any questions.