This tutorial will show you how to make an Ionic App on the terminal and run it on a browser, iOS Simulator and Genymotion. I’ve also noted some errors and problems that I’ve encountered when I first started making an Ionic project on the terminal just in case you’ll encounter them too.

Prerequisites: Before you start, you must have iOS and Android SDK’s installed as well as the Ionic CLI and npm (Node Package Manager).

cd to the directory

Go to the directory in your computer that you want this Ionic project to live in. Let’s say this directory is called “MyIonicApps.” It doesn’t have to be named like this. You can just save it on your Desktop or Documents folder if you want to.

$ cd MyIonicApps

Ionic provides templates

The easiest template to start with is the blank template. The other two are sidemenu and tabs.

This is the syntax (I suggest following PascalCase):

$ ionic start ProjectName [template]

For this tutorial, we’ll use the blank template. The code below will start an Ionic app based on the blank template. After pressing the enter key, you should see on the terminal that it’s downloading the Ionic dependency files. Then it creates a new directory inside MyIonicApps containing all of them.

$ ionic start MyFirstIonicApp blank

Go to your newly created Ionic app and look at the dependency files that were created.

$ cd My FirstIonicApp && ls

If you don’t go to the newly created ionic app folder and decide to make Cordova or Ionic commands in MyIonicApp folder, the terminal will give you an error like this:

See if it works

Run the app on Ionic’s server and view on your default browser.

$ ionic serve

If this is truly your first Ionic app, the terminal will prompt you to choose an address. See image below:

I usually choose localhost. That doesn’t mean you have to run a XAMPP or a Bitnami Stack. Once you’ve selected an address, this should be the results:

This prompt should be first time only. After this, every time you want to run Ionic via Ionic server, your default browser will automatically open and run your Ionic project. And every time you modify code inside your Ionic project and hit save, the Ionic server will automatically update the browser immediately to reflect the changes, just as long as the server is running.

This is what the blank template should look like:

Note: If you see a blank screen, that means there’s something wrong. If double brackets appear on the browser but the Ionic header bar and title aren’t showing, that also means there’s something wrong. Make sure you didn’t accidentally modify anything. Try to do undo everything, just in case.

Add platforms

The previous steps allows you to run and test Ionic on a browser but you won’t be able to run it to an iOS simulator, Android emulator (Ionic team prefers Genymotion), or any real device unless you configure the platforms.

$ ionic platform add ios
$ ionic platform add android

Android might be tricky. Ionic documentation has notes for Android. But I will be specific with the problem I encountered. I was working on this on OS X Yosemite and ant was not installed somehow. Worse, since I updated my machine to Yosemite, brew got messed up. So I’ll add a fix on here to get brew updated, if that’s what you want to do.

$ cd /usr/local/Library
$ git pull origin master

Once brew is okay… 

$ brew install ant

Check to see ants version by typing:

$ ant -version

Let’s build it!

$ ionic build ios
$ ionic build android

Emulate or Run

iOS is easy since this tutorial assumes you’re working on a Mac OS X. (You have to be on a Mac anyways to have iOS).

$ ionic emulate ios

If you get an error:

Just type this line of code on the terminal and try to emulate again

$ sudo npm install -g ios-sim

Once ios-sim is installed, you can now run your Ionic app on the iOS simulator.

Don’t use emulate on Android!

If you’ve ever developed for Android before Genymotion existed, you know that the default Android Emulator is slow, a pain, and just plain horrible! You do not want to type emulate for this one. Use Genymotion. Install it if you haven’t yet.

So if you’ve got Genymotion, start it up and run a specific virtual machine. For example, if you have Google Nexus 5, just start it up from Genymotion dashboard. Once your chosen virtual device is up, type:

$ sudo ionic run android

If you don’t do sudo, sometimes you’ll get something like this:

rm: could not remove file (code EACCES)…

Your Blank Ionic project should run on your chosen Genymotion virtual device.

That’s it!

This is how you make an Ionic app on the terminal and run on iOS and Android virtual devices. And just an FYI, Ionic team has been making Ionic Creator. It’s an IDE that should eliminate the use of the terminal. It’s still on beta at the time of this writing. But I made this post for nostalgia’s sake.