How to get started with Ionic framework 3

Howdy coders,

In this tutorial, we are going to learn step by step setup guide on how to get started with Ionic Framework 3. So let’s get started…

What is Ionic?

Ionic is the beautiful, free and open-source mobile SDK for developing native and progressive web apps with ease.

Ionic Framework offers the best web and native app components for building highly interactive native and progressive web apps

Ionic allows you to build progressive web and native mobile apps for every major app store, with one codebase.

Ionic uses Cordova to wrap up your web App to Native Application

IONIC + Cordova = Native Apps for Android,Ios,Window

 What Should You Know?

• HTML
• CSS
  
• Basic JavaScript
  
• Programming Fundamental(Like Functions, conditionals, loops, etc)
• Angular 2+ (will be an advantage)
  

How to Install Ionic 3:

STEP-1:

Install Dependencies: Node.js and NPM

Download NodeJS from this link and Install on your machine(NPM is Inbuilt in Node.js Package).

To Check the Node.js version use node -v

To Check the NPM version use npm -v

STEP-2:

Install IONIC 3 by typing the following command in your terminal:

npm install –g ionic@latest

It will install the latest version of Ionic in your system

STEP-3:

Then after Install Cordova using the following command:

npm install -g cordova

It will install the Cordova in your system which is used for build Cross Platform native apps using Ionic3

Use ionic info command to check Ionic Cli current version

Use ionic -v command to check the ionic version

Use cordova -v command to check Cordova version

How to create Porject with IONIC3:

Create Project With CLI

After installing Go to your target folder with terminal and type following command

ionic start <projectName> <projetcTemplate> 

Use ionic start –list to view the list of available project templates

Hey, That’s it now you have completed Ionic Setup and Now you can run your project by moving into your project directory and just type ionic serve it will run your blank project in your browser.

Conclusion:

Thanks for reading.

Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter