Getting Started with the Ionic 1.x Command Line Interface (CLI)

6 min read

Originally published May 28, 2015

Check out my advanced Ionic tutorials at eliteionic.com

Like most other tools and frameworks around these days, [Ionic][1] uses the command line interface to perform a lot of its magic. The command line interface can be a little intimidating if you’re used to a GUI (Graphic User Interface) approach, but it’s really super simple once you get the hang of it and you can do some crazy cool stuff.

This tutorial is for two types of people:

  1. People who are comfortable with using a command line interface but are new to Ionic
  2. People who avoid using the command line interface at all costs AND are new to Ionic

If you’re either of those two people then you should probably keep reading, if not then… maybe you should check out some [more advanced Ionic CLI magic][2].

BONUS CONTENT: Who has time to read a whole blog post? Download a cheat sheet of all the Ionic commands you need to know to get up and running

The one command you need to know

This one is for the people completely new to using a command line interface. There’s a bunch of useful commands you can use in either the [command prompt in Windows][3] or the [Terminal in Macs][4], but there’s one universal command that you’ll need to know:

cd```

It means “_change directory_” and it **changes your current working directory** – it’s how you navigate to different locations on your computer through the interface. You can use:

cd MyFolder```

to change your working directory to **MyFolder** and you can use:

cd ../```

to navigate one level up from where you are currently. Even if you have complete command-line-phobia, you can use Ionic just fine by knowing this command and about two other Ionic commands.

### Installing Ionic

Before we can use Ionic we need to install it, and to do that we need to use the command line interface. Before we install Ionic though, we’ll need to install [Node][5].

  * Head over to the [Node website][5] and install node

This will give us access to **npm** (Node Package Manager) which allows us to easily install a bunch of useful stuff through the command line.

  * Once you have npm installed run the following command:

npm install -g cordova ionic```

This will install Ionic for you (and Cordova which you will almost certainly want to use as well, it's how you build native versions of your HTML5 apps).

### Generating a new Ionic Application

To generate a new Ionic project, first change your working directory to wherever you want the project to be created and then simply run:

ionic start MyApp blank```

This will generate a new Ionic project with all the files you need to start creating your Ionic application:

[
ionic-project-structure
][6] You will have the basic default template to work with if you run this command, but you can also generate your Ionic application with some prebuilt application templates. You could use:
ionic start MyApp sidemenu```

to create a project with a sliding menu (along with some other dummy data) already built in:

[
ionic-side-menu
][7] or you could use:
ionic start MyApp tabs```

to create an application with tabs built in _OR _you can even create your app from custom template on [codepen.io][8]. Just simply link to one of the Ionic templates like this:

ionic start MyApp http://codepen.io/ionic/pen/AjgEB```

### Setting up SASS in an Ionic Application

I won't spend time explaining [what SASS is and what it's capable of][9], I highly recommend reading more into it but essentially all you need to know is that it allows you to edit your **scss/app.scss **file and have a new **.css **file generated from it that will be used by your Ionic application.

To set up SASS in your newly generated Ionic project, first change your working directory to the new project:

cd MyApp```

and then run:

ionic setup sass```

If this doesn't work, **you may first need to run**:

npm install -g gulp```

### Running your Ionic Application

You can view your application live through your browser simply by running:

ionic serve```

As soon as you make any changes to your app the change will be reflected immediately. To stop ionic serve, just hit **Ctrl + C**.

### Viewing your Ionic Application on a Device

You can use the [Ionic View][10] app to quickly view your Ionic application on a real device. Simply [download the Ionic View application][10], and then run the following commands:

ionic login```

This will allow you to log in with your [ionic.io][11] account (if you don't already have one, you should create one). Once you have logged in you can run:

ionic upload```

Which will upload your application, making it available through the Ionic View app. Then you can just open up Ionic View on your device, log in and find the application you uploaded.

### Emulating a Native Device

You can also easily emulate your application on your computer. To emulate an Ionic application on iOS you can run the following commands:

ionic platform add ios```

ionic build ios```

ionic emulate ios```

This will add the iOS platform with Cordova, build the application and then launch the emulator with your application loaded into it:

[
iOS Simulator
][12] You may first have to run:
npm install -g ios-sim```

if you have not already installed the iOS simulator.

**NOTE:** _If you don’t have a Mac you won’t be able to use the iOS Simulator ([you can still build iOS applications][13] however!)_

To learn how to emulate for Android, take a look at [this tutorial][14].

 


  

  


 [1]: http://www.joshmorony.com/learn-ionic/
 [2]: http://www.joshmorony.com/how-to-minify-an-ionic-application-for-production/
 [3]: http://ss64.com/nt/
 [4]: http://ss64.com/osx/
 [5]: https://nodejs.org/
 [6]: https://www.joshmorony.com/media/2015/05/ionic-project-structure.jpg
 [7]: https://www.joshmorony.com/media/2015/05/ionic-side-menu.jpg
 [8]: http://codepen.io/ionic/pen/AjgEB
 [9]: http://sass-lang.com/
 [10]: https://itunes.apple.com/us/app/ionic-view/id849930087?mt=8
 [11]: https://apps.ionic.io/
 [12]: https://www.joshmorony.com/media/2015/05/ios-simulator.jpg
 [13]: http://www.joshmorony.com/faq-do-i-need-a-mac-to-make-ios-apps-with-phonegap/
 [14]: http://ionicframework.com/docs/ionic-cli-faq/#android-sdk