How to Install and Get Started with Ionic Cordova

December 02 2015

Cordova and Ionic offer some really useful features that allows web developer to write native applications for each platform using web languages. These apps aren't mobile websites, but apps that sit in the app store. Understanding and developing using Cordova and Ionic can be a little tricky at times, and I've found that getting your machine set up can be a bit cumbersome. In another article, we discuss how you can use Wijmo with NPM and Webpack to create applications targeting the most popular JavaScript application frameworks.

Here are the eight steps for installing and getting started with Ionic Cordova:

Download NodeJS
Configure the Path
Install Cordova
Install Ionic
Create Your First Ionic App
Create Native Platforms
Run Your Application
Test Android

Download Now!

Step One: Download NodeJS

Installing NodeJS

NodeJS is a JavaScript runtime built on Chrome's JavaScript Engine. Today, we'll be using the NodeJS package ecosystem called npm. This helps us get all the necessary libraries and frameworks onto our local development machine. At the time of this writing, npm is the largest ecosystem of open source libraries in the world. Of course, Wijmo isn't open source, but we'll need npm to install the necessary files.

Download NodeJS here >>
- Mac users: For OS X, download the .pkg file and take note of the last screen of the installer.
- Windows users: Download either the MSI or the exe, whichever you prefer.
After you're done you'll most likely need to restart your computer.
After you NodeJS installs, you can utilize the npm commands to get the packages.
- Mac users: you should be able to use npm right from terminal, assuming your PATH is configured correctly.
- Windows users: you can use the built-in command prompt or NodeJS command prompt.
Mac users: If you want to install globally, you need to use sudo, so make you sure you know what you’re downloading.

sudo npm install -g  
// -g the is for global If you want to be able to utilize the CLI, which we do. so use g.

To ensure that npm is configured correctly, you can type:

npm –-version

Step Two: Configure the Path

Configuring CLI For Mac

After we've installed NodeJS, we want to configure our path or verify that the Path is set up the correct way. I broke mine the first time, so I'll show you how to fix it if you mess it up. If everything is set up correctly, you should see the version number displayed on the command line. If this is the case, you can skip down to the Ionic Cordova installation.

If your terminal is not finding npm, type the following commands into terminal:

touch ~/.bash_profile  
open ~/.bash_profile

This opens the .bash_profile file in your default text editor. It may be the case that your bash_profile is either empty or filled with a bunch of things; regardless, we want to make sure we have our /usr/local/bin inside it. When I originally ran mine it looked like this:

/bin  
/usr/bin  
/usr/local/bin

You can verify the contents of your path by typing into the command prompt:

echo $PATH

If suddenly you can do things like ls or pico, type the following export:

PATH=/bin:/usr/bin:/usr/local/bin

...and your basic commands will return.

Step Three: Install Cordova

Once you've installed npm, installing Cordova on Windows and Mac is pretty straightforward. You can use npm to do this.

In your command prompt, type:

sudo npm install -g cordova

You may be asked to type in your admin password. (I'm not sure if you can add ionic at the end here and do it in one command.)

The install will take a few minutes.

Step Four: Install Ionic

Next, install Ionic:

sudo npm install -g ionic

If you had previously installed Ionic, you can run the updater tool:

ionic lib update

Mac users: Next, make sure that your Xcode (if you're using Mac OSX) is downloaded and up to date.
Windows users: If you already have an Android emulator or a Windows Phone emulator, just ensure that you're up to date.

Configuring the iOS Simulator (Mac OSX only)

Let’s get the npm packages that allow us to launch the iPhone sim from the terminal via Ionic:

sudo npm install -g ios-sim

You can verify that your ios-sim is installed correctly by typing:

ios-sim –version

Now let's type in pwd to figure out where we are, and navigate to our desktop print working directory.

Step Five: Create your First Ionic App

Navigate to your desktop via the command prompt.

cd Desktop

Now, let's make a new ionic application and use the sideMenu template we can also use tabs, Apptabs and Blank ionic start firstIonicApp sidemenu. This will download the template; use blank if you just want the structure.
1. If we want to create a new template app, we type:

ionic start myApp tabs

If we want to create one with a sidemenu template, we type:

ionic start myApp sidemenu

The CLI contains a few flags, as well, which you can configure:
- Human readable name for the app (Use quotes around the name) --appname, -a .......
- Package name set in the config ex: com.mycompany.myapp --id, -i ............
- Do not create an app targeted for Cordova --no-cordova, -w ....
Next, we want to navigate inside the folder:

cd myApp && ls

Step Six: Create Native Platforms

The next step is to create some native platforms.

For iOS:

ionic platform add iOS

For Android:

ionic platform add Android

Inside each respective platform folder, you should find your XCode and Android Studio projects.

Step Seven: Run Your Application

Running it on iOS

Inside platform/ios/HelloCordova is the XCode project, but you don’t need to open it. We'll continue using the CLI to do our operations.

Next step is to run the emulate:

cordova emulate ios --target="iPhone-4s"  
iPhone-4s  
iPhone-5  
iPhone-5s  
iPhone-6-Plus  
iPhone-6  
iPad-2  
iPad-Retina  
iPad-Air  
Resizable-iPhone  
Resizable-iPad

You should see your emulator launch:

You'll want to consult the Apple developer docs to get the most recent list of emulators available to you.

Running your application in the browser

Since it's a JavaScript application, from the terminal you can type the following command:
```
ionic serve  
```

This launches the Ionic webserver that allows you to debug you application. The server will reload the page every time you update a file.

If your browser doesn’t launch, type in your URL in browser.

localhost

From terminal, to quit out of the prompt, type:

Here's another neat feature of Ionic that allows you to see how Ionic changes the look and feel of your app. It's nice if you’re a Windows user or a Mac user without Android studio installed.

Type with the labs flag:

ionic serve –l

This launches your web browser, but it shows your website inside a iOS and Android window.

Setting up Android Emulator and Android SDK

I downloaded and installed Eclipse and the Java SDK. You can use any IDE you want for the Android stuff. Download Eclipse here >>

For Mac OSX

You should be able to type Java into terminal and see what you need.

While the Android SDK is downloading and installing, you can go ahead and start reading about how to create an AVD.
Learn about the CLI.

Setting up Android Studio

Download Android Studio >>

Mac OSX Users: Drag and drop Android Studio into the Applications folder.
Open Android Studio and follow the setup wizard to install any necessary SDK tools.
Depending on your security settings, when you attempt to open Android Studio, you might see a warning that says the package is damaged and should be moved to the trash. If this happens:
1. Go to System Preferences > Security & Privacy
2. Go to "Allow applications downloaded from"
3. Select Anywhere
4. Open Android Studio again

Installing Homebrew

I tried installing all of the Android SDK and tools, but I've found that Brew was the easiest way.

Mac users: The easiest way to install Brew is to type the following command into your terminal:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Android ANT

Android ANT will allow you to build using the CLI. It creates an .apk file with a debug key so it's ready for installation onto an emulator or a device. You can read more about Android ANT on their developer forums.

Once you have Brew installed, installing Ant is as easy as typing the following commands:

brew update  
brew install ant

Android’s docs note that support for Ant as a build tool is ending. They recommend that you migrate your app development projects to Android Studio.

Android SDK

Once we have Android-Ant installed, we need to install the Android SDK. Once again, the easiest way to install Android-SDK on Mac OSX is to use Brew:

brew install android-sdk

For Windows

Java JDK

Install the newest JDK (not the JRE).
We need to create an environment variable for the Java JDK in JAVA_HOME and point it to the root folder where the JDK is located.
- From Android Docs: If you installed the JDK into C:\Program Files\Java\jdk7, set JAVA_HOME to be this path.
- Add the JDK's bin directory to the PATH variable. Following the previous assumption, this should be either %JAVA_HOME%\bin or the full path C:\Program Files\Java\jdk7\bin

Installation Guide

Android Studio and SDK

Download Android SDK:
- Android Studio >>
- Android SDK >>
Once you have the exe installed, you’ll need to configure your Windows systems.
Follow the setup wizard to install Android Studio and any necessary SDK tools.
On some Windows systems, the launcher script does not find where Java is installed. If you encounter this problem, you need to set an environment variable indicating the correct location.
1. Select Start menu > Computer > System Properties > Advanced System Properties
2. Open Advanced tab > Environment Variables
3. Add a new system variable JAVA_HOME that points to your JDK folder. For example: C:\Program Files\Java\jdk1.7.0_21.

Android ANT

Download Apache ANT >>
Just like we did with the Java SDK, we need to add ANT to our PATH. Copy the ANT installation to our C: drive, then add the following to your PATH. Like so: C:\apache-ant-1.9.2\bin

Step Eight: Test Android

Now that we have an IDE, Android-SDK, and Apache-ANT installed, we should be able to set up and AVD using Android manager.

The easiest way to launch the manager is to type:

android

This should launch a SDK window. At this point we want to install all of the necessary tools and SDKs. You can see Ionic Cordova’s documentation to find exactly what you need; I downloaded the entire SDK. From this point you should be able to create an Android project.