How to Install and Get Started with Ionic Cordova

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:

1. Download NodeJS
2. Configure the Path
3. Install Cordova
4. Install Ionic
5. Create Your First Ionic App
6. Create Native Platforms
7. Run Your Application
8. Test Android

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.

1. 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.
2. After you're done you'll most likely need to restart your computer.
3. 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.
4. 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.

1. 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  

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

echo $PATH  

3. 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.

1. In your command prompt, type:

sudo npm install -g cordova  

2. 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

1. Next, install Ionic:

sudo npm install -g ionic  

2. 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)

1. 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  

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

ios-sim –version  

3. 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

1. Navigate to your desktop via the command prompt.

cd Desktop  

2. 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  

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

ionic start myApp sidemenu  

3. 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 ....
4. 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.

1. 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  

2. 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

1. 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.

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

localhost  

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

q  

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.

1. Type with the labs flag:

ionic serve –l  

2. 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 >>

1. Mac OSX Users: Drag and drop Android Studio into the Applications folder.
2. Open Android Studio and follow the setup wizard to install any necessary SDK tools.
3. 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.

1. 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.

1. 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

1. 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

1. Install the newest JDK (not the JRE).
2. 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

1. Download Android SDK:
   • Android Studio >>
   • Android SDK >>
2. Once you have the exe installed, you’ll need to configure your Windows systems.
3. Follow the setup wizard to install Android Studio and any necessary SDK tools.
4. 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

1. Download Apache ANT >>
2. 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.

1. The easiest way to launch the manager is to type:

android  

2. 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.

Creating and Running and Android Application

1. If you haven’t built your Android application yet, go ahead and type:

ionic platform add android  

2. Once your android platform is added, type:

ionic run android  

This should launch the emulator.