Installing Ionic 2 & Starting a Project

• This post is a part of our Free Ionic Course

Within the last several months, I have been very focused on writing and recording Angular 2 content. Now, I'm excited to start shifting emphasis, at least for a little bit, onto Ionic 2, which compliments Angular much like jelly compliments peanut butter!

Because Ionic 2 is built on top of Angular 2, I would highly advise you to watch (or read) our Angular 2 Fundamentals course. Don't worry, it's free, and it will make your life only about 1,000x easier when you're attempting to learn Ionic. 

Prefer watching a video?

Some people like watching videos, and others like reading; so we've provided both. Please subscribe to our youtube channel.

What is Ionic?

Ionic is an open-source SDK framework for building and deploying hybrid mobile apps for Android, iOS and Windows platforms. You can use the standard web technologies that you're already familiar with (HTML, CSS/SASS, JS) to build a single app that's usable across multiple platforms.

Not only that, it can also harness the power of Apache Cordova to add native functionality in a wide variety of manners (such as accessing the phone's camera, GPS, and more).

So, that's what makes it a hybrid mobile app framework. On one hand, it's built with standard web technologies, but on the other, you can hook into native functionality of the target device platform.

At the end, your app is accessible just like any other native app in an app store. Users can find it in the app store, download it, and access it on their phone.

Ionic Prerequisites

Before you can install Ionic 2, you'll need Nodejs 6 or greater. Visit the installation page, and choose the installer based on your OS.

You will also need to make sure the Node Package Manager (npm) is included with the installation. Don't worry, this is enabled by default on the last screen of the Nodejs installation process.

Once Nodejs is installed with npm, you can proceed to the next step.

Installing Ionic & Cordova

Open up your console of choice (on Windows, I use Cmder) and type the following into the console.

$ npm install -g ionic cordova

This command is only needed to run once on your machine as long as you use the -g (global) flag. It installs the Ionic CLI (Command Line Interface) along with Cordova, which is needed to build and deploy your app natively.

Once this is complete, you're now ready to start your first Ionic project.

Starting your first Ionic 2 project

With your console still open, type the following:

$ ionic start firstProject blank --v2

Let's break down this command:

1. ionic - This is how you access the Ionic CLI and issue to it certain commands. If you type "ionic" and hit enter, it will provide you with version information, along with available commands. Typing ionic -h will give you descriptions for each of the commands along with their arguments.
2. start - This is the command you issue to the CLI for starting a new project. 
3. firstProject - This is the path, and you can give it the name that's associated with your project. The Ionic CLI will create a folder with the name you issue the path, and place inside of it all of the necessary project folders and files.
4. blank - This is optional. Ionic 2 allows you to choose from several different starter templates based on your project needs. The other 3 options are: tabs, sidemenu, and tutorial.
5. --v2 - This flag designates that this Ionic project will be based on version 2. If left out, it will install an Ionic 1 project, which you don't want.

Once the above command has completed, type:

$ cd firstProject

You're now ready to serve your first Ionic 2 app!

Serving your Ionic 2 App

Run the following command inside of the firstProject folder:

$ ionic serve

This command will start a local development server that you can use to preview your app in the browser while developing and testing. It will automatically launch the project in your browser and it will look like this if all goes smooth:

The ionic serve command accepts another of options. To view them all, type ionic -h in the console. Below are the most notable options:

• --port - This allows you to designate the dev port. When omitted, the default port is 8100.
• --nolivereload - When you run ionic serve, livereload is enabled, which automatically reloads the browser when you save files. If you don't want this functionality for whatever reason, you can turn it off with this flag.
• --browser - You can designate which browser to use (safari, firefox, or chrome).
• -lab or -l - This is a great feature, as it allows you to view the app on simulated mobile platforms and screen sizes, simultaneously.
• --platform - You can serve it with a specific platform build in mind (ios or android).

Exit out of ionic serve by hitting control-c and typing y for yes. Then run:

$ ionic serve -l

This will serve the app in lab mode. This will give you a much better idea of what the app will look like on different mobile devices.

The Ionic 2 Project Structure

Since you're familiar with Angular 2 already, the project structure will look quite familiar. There are some differences, however. 

> hooks
> node_modules
> plugins
> resources
> src
  > app
    app.component.ts
    app.html
    app.module.ts
    app.scss
    main.ts

  > assets
  > pages
  > theme
> www

The bulk of your work is going to occur in the /src folder, which is why I revealed what's inside. As you can see, it's almost identical to your standard Angular 2 project structure.

The only differences here, lies in the fact that we have a pages, assets, and themes folder. Again, nothing especial here; it's just a different organizational structure.

Also, you will note that instead of a CSS file, we have a SASS (scss) file. That's because, by default, sass is used when the Ionic CLI generates a new project. This is a small bonus!

Final Thoughts

After installation, you can see it's fairly straight forward to create a new project with the Ionic CLI. In the next lesson, we're going to take an in-depth look at Ionic Components.