Ionic Installation


Continuing from the first Ionic post called Ionic Introduction, here we talk about getting set up to use Ionic. You will require the necessary components to be installed before you can begin using Ionic. How do you install Ionic? The following is based on information in the Ionic website at the Installing Ionic page.

Command Line Installation Steps

  1. Install the latest version of Node.js from here.
  2. Test that the Node.js installation worked.
  3. Install the Ionic CLI and Cordova for native app development. You may need to add “sudo” in front of these commands to install the utilities globally.
  4. Once that’s done, create your first Ionic app. First, navigate to the directory that you store all of your projects in. Omit –v2 if you’d like to use Ionic 1. Use version 2 if you are using Angular 2.
  5. To run your app, cd (change directory) into the directory that was created and then run the ionic serve command to test your app right in the browser!

Step 3

npm install -g ionic cordova

Step 4

cd sites
ionic start MyIonic2Project tutorial --v2

Step 5

cd MyIonic2Project
ionic serve -l

The above is ionic serve dash and the letter l. If you want to run it in the browser, omit the dash with the letter l. If you do not change to the directory (cd MyIonic2Project) in the above step, you may get the following message:

Couldn't find ionic.config.json file. Are you in an Ionic project?

Templates

If the tutorial template isn’t something you want to use, Ionic has a few templates available:

  • tabs : a simple 3 tab layout
  • sidemenu: a layout with a swapable menu on the side
  • blank: a bare starter with a single page
  • tutorial: a guided starter project

If you don’t specify a template by running ionic start MyIonic2Project –v2, the tabs template will be used.

Your project folder contains a lot of files; over 5000 files and over 120MB.

Platform Guides

For those building native apps for iOS and Android (most of you!), each platform has certain features and installation requirements before you can get the most out of your Ionic and Cordova development. For iOS developers, take a look at the Cordova iOS Platform Guide and follow the instructions to install or upgrade Xcode, and possibly register for a developer account to start building apps for iOS. For Android developers, take a look at the Cordova Android Platform Guide and follow the instructions to install the SDK and/or Android Studio to start building apps for Android.

Running the App

Once everything is installed and working, it’s time to take a break. When you come back to your project and you want to run it…

  1. Open a command prompt
  2. Navigate to your project’s directory
  3. Run this: ionic serve -l (that’s a dash and the letter l at the end)

What’s Next?

Once you have Ionic installed you will want to learn how to develop apps. Have a look at Ionic’s Ionic 2 Tutorial. Also note that Ionic uses TypeScript for it’s code. If you’re unfamiliar with typescript, take a look at this page.

Ionic Developer Glossary

Have a look at the Ionic Developer Glossary.

Series Navigation<< Ionic IntroductionIonic Hello World >>

Leave a comment

Your email address will not be published. Required fields are marked *