Installing ionic Framework

Installing ionic Framework

ionic offers a ton of features to create a mobile app. One feature is its command line interface. This CLI sets up app development environments with a few simple commands.

 

Installing ionic

You will need node installed, ionic uses NPM modules. Once node is installed open terminal on mac or command prompt on Windows. Enter the following command. This will install ionic globally and allow the usage of ionic commands.

sudo npm install -g ionic

 

Creating Starter Apps

After ionic is installed, enter the following command. This will create a tabs starter app. There are a few starters available from ionic. We will go over these later. This will create a new app named myAwesomeApp. Change myAwesomeApp to the name of your app. Use –v2 with all your ionic start commands. This is version 2 of the ionic framework and will be what is used through this tutorial.

ionic start myAwesomeApp --v2

As mentioned, the default starter app is a tabbed base app. On iOS the tabs are at the bottom and on Android the tabs are at the top. ionic changes its UI to fit the native device OS UI. Remember, you want to write you code once and have it displayed appropriately for each platform. ionic does this without needing to add extra code or do more work. You can, however, override this behavior.

If you want to create other apps besides a tabbed UI there are a few options you’d expect from typical app styles. Side Menu or blank are some other starter apps. To choose the type of app for the CLI to create you add a parameter after the name of your app in the ionic start command. Note, below we have sidemenu in the command.

ionic start myAwesomeApp sidemenu --v2

 

Available Starter Apps

  • tabs – a tabbed UI with separate views each view with own navigation
  • sidemenu – typical app UI with a toolbar menu icon to open a drawer with navigation links
  • blank – app with no navigation type or UI. Bare bones app.
  • tutorial – used in conjunction with the ionic docs. You can read and then view the example in a real app.
  • super – a starter with more than a basic setup. It shows you how you should code your app with best practice examples from the ionic team

I suggest you create all of these starters and play around and look at the code. The CLI makes it quick and easy to spin up a new app.

 

Viewing App

After you have created the starter app with the command line, you can cd into the directory and start using ionic commands.

cd myAwesomeApp

Then we need to serve the app. ionic serve is how you will view your app during development. When you make changes to the code during development ionic will build the files and refresh the browser so you can see the changes immediately. These types of thoughtful developer additions are exactly the reason I use ionic. The –lab parameter opens the app formatted to the size of a mobile phone. You get a better idea of what the app will actually look like. if you omit the –lab parameter the app will open in the browser full width.

ionic serve --lab

 

Here is an example of an app that was created from the tabs starter app and viewed using serve –lab.

wordpress mobile app
ionic app viewed with serve lab

ionic CLI is the best method for quickly getting an app development environment set up. The starter apps cut out a ton of development time. Hope this post gets you up and running with ionic. Check out other tutorials in WordPress mobile app series.

Bitnami