What is ionic? How to start mobile app development with ionic?
- Ionic is an open source framework free platform.
- Hybrid development so you can work easily on IOS, ANDROID, Windows and any other operating system.
- Beautiful default Designs and template like tabs, sidemenu, super, tutorial
- A very large active community so you can get an idea, solution to common issue etc.
- Ionic is Create use Angular
I hope you get what is ionic and its benefits. So, let install on our system and my doing on windows operating system.
- Download and install the node js for the window, Mac or Linux from here https://nodejs.org/en/ download the recommended because it is more stable.
- Download and install the VS CODE for Mac or Linux from code.visualstudio.com vs code is light waited for IDE for any programing language.
After installing the node, you need to add the path “C:\Program Files\nodejs” to your environment variables. Follow this step to set on windows.
- In control panel > System and Security > System
- Click on the Advance system setting click on Environment variables
- On system, variables select a path and Click on Edit and New.
- Paste the nodejs installed path on it and Click on Ok.
- Open the Command promote (cmd) Enter “npm –v” if you see the version number of node.
So we set the node js globally on our system. Let’s lunch the vscode and press “CTRL + ` “ and type command and hit Enter:
“npm install -g ionic” or “npm install -g ionic cordova”
It takes 4- 5 minutes to ready your system to developing the amazing app. Once it done create your first ionic app. By entering the command.
ionic start Myionicapp sidemenu
After enter the command it ask you integrate your new app with Cordova to target native iOS and Android?
Enter “Y” to integrate Cordova in a project which helps to run an app on a device.
cd Myionicapp to enter the floder.
ionic serve to run on browser.
Ionic also provide the great official template.
- blank: start with a single page
- tabs: a simple 3 tab layout
- sidemenu: a simple Side menu on the side
- super: start an app with 14 ready page designs
- tutorial: a guided starter project
If you want to run your app on your device follow this step
Note: For IOS app development you need to mac
- ionic Cordova platform add android or ionic Cordova platform add IOS
- ionic Cordova build android or ionic Cordova build IOS
- ionic Cordova run android or ionic Cordova run IOS
In this article, we learn what is ionic and how to set up in our system, and now you can develop any an app, can solve any problem.