Starting an Ionic Project

Ionic projects can be started either using the CLI (command line interface) or using Visual Studio 2015 or newer. For the purposes of this explanation I’m going to focus on the CLI.

If you want to use Visual Studio 2017 please visit Microsoft’s tutorial page Get started with Ionic apps in Visual Studio. After creating the app in Visual Studio you can still use the CLI, or even load an app created by the CLI into Visual Studio. The only way that I’ve deployed a Windows app is through Visual Studio and I haven’t seen a way to deploy it without Visual Studio. So if you’re planning to deploy a Windows app, it’s easier to start from Visual Studio.

Installing Ionic

Ionic requires that Node and npm is installed. Go to NodeJS to install the latest version for your computer.

Ionic requires Cordova and with npm it’s easy to add both at the same time. The -g will make Ionic and Cordova a global installation. sudo normally will be required in Linux because global installations require raised permissions. On Windows it’s not required.

npm install -g ionic cordova

or

sudo npm install -g ionic cordova

If any errors happen and you need to reload Ionic, use the following commands

npm uninstall -g ionic

npm cache clean

before attempting again.

Create the project

ionic start PROJECTNAME blank

This will create a folder called PROJECTNAME that will contain the new project. The example is creating a blank project. There are five types of starter projects that come out of the box.

  • tabs: a simple 3 tab layout
  • sidemenu: a layout with a swipable menu on the side
  • blank: a bare starter with a single page
  • super: starter project with over 14 ready to use page designs
  • tutorial: a guided starter project

Don’t forget to cd PROJECTNAME to run the rest of the commands.

Add components

ionic generate page Settings

Generate can be shortened to g. Which is good because this gets used a lot. In this case we’re generating a page called Settings. In the page folder a settings folder will be created with three files; SASS, TS, and HTML. The basic structure will be added to each file.

There a few types of things that can be generated; - pipes - components - pages - directives - providers - tabs

Add Platforms

ionic cordova platform add android

The Platform will add the needed files for the specified platform. Plugins will be checked and platform information will be downloaded.

Platforms available: - IOS - android - windows

Actions available: - add - update - list - check

Add Plugins

ionic cordova plugin add PLUGINNAME

While there is a large amount of really cool features that come out of the box with Ionic and Cordova. There is still a lot of power that comes from the vast amount of plugins available that are very ease to add to your app.

The plugin will add any needed files that the selected platforms need. For this reason I’d recommend adding the platform first, otherwise the plugins would be reinstalled for the new platform.

Cordova has a searchable list of the plugins that are available. Not all plugins are available for every platform so for example if you are trying to support Blackberry, not all plugins will be usable. For the most part there is wide spread support for Windows, IOS and Android.

Other actions for this command are: - remove - list

ionic cordova plugin add cordova-sqlite-storage --save

A very common plugin is the sqlite plugin. This adds SQLite to your app. Ionic’s local storage service will automatically use this on a device.

ionic cordova plugin add cordova-plugin-statusbar --save

npm install @ionic-native/status-bar --save

In this example the Cordova plugin is pulled in and then an ionic portion is pulled in using npm.

Run the server

ionic serve

The Ionic server is an easy way of testing a Ionic app in a browser. Keep in mind that native calls won’t work in the browser, for example the camera.

ionic serve --lab

The --lab option will load the project in a browser and lets you see the project in the style of the different platforms. Normally the project loads in the browser as Material Design, Android. Which is fine, but it’s great to see IOS, Android and Windows side-by-side to see how Ionic is providing a native feel to each platform without very much work on your part.

Build the app

ionic cordova build ios

Ok, we skipped making the app actually do anything, but since the app is able to run, you could build the app for whatever platform you want and deploy it. There are options to deploy the app onto a device or emulator. The options at this point are vast. You could package it up and deploy it directly to your device, or place it in the market yourself. Ionic also has a service that makes uploading and deploying the app very easily.