Search This Blog

Wednesday, July 20, 2016

Installation of Ionic framework on Windows with Cordova.

Courtesy code.tutsplus.com

Download the Node js and install it using simple Next, Next and finish steps.  

     Run cmd prompt.
·         Type “npm install -g ionic
·         Verify ionic using “ionic –version”
·         Now install Cordova using “npm install –g cordova”
·         Verify the same by typing “cordova –version”
·         Now create project “cordova create “project name”
·         Use “cd project name” to enter the project.
·         Now if you want to use the desktop platform use command “ionic serve” and you will be     
       able to use desktop platform.

     Note- above steps are the common steps to for all the platforms but if you want to add Android platform you need follow the below steps.

·         Download Android studio
·         Before installing you need to download JDK. Download  jdk-7u79-windows-x64.exe(1.7)   or the above version.
·         Now install the JDK (it will install default in program files).
·         Add the JDK Environment variable as below.
·         Click on start and search “environment variable for system account”
·         Click on environment variable
·         Open it and click on new.
·         Type “JAVA_PATH “  in variable name and give your JDK path (C:\Program       
       Files\Java\jdk1.7.0_79) in variable value.
·         Once the JDK path set you need to run the Android studio setup and install it. (it will take    
       some time to install as it has to download some updates over the internet)

  Note:- Make sure that you have installed JDK properly and set the java path properly in
  Environment  Variable.

·         Now the android studio installed properly and you need to set the below “environment    
       variables” as you did before for JDK.
·         Click new and set “ANDROID_HOME” as a variable name and give your SDK path in the 
       variable value (C:\Users\usernameXXXXX\AppData\Local\Android\sdk).
·         Now edit the “PATH” Variable and add the variable value in existing path 
       (;C:\Users\Aayush\AppData\Local\Android\sdk\platform-tools; 
       C:\Users\Aayush\AppData\Local\Android\sdk\tools)
·         Now enter in your project using command prompt and type “cordova platform add android”.
·         Now everything is ready but before running the android platform you need to add the AVD 
       (Android virtual device) in the android studio.
·         Open the android studio and click on tools and then android and then AVD manager.
·         Now add the Android virtual device and check with start.


     Note:- You need to enable the virtualization in BIOS if it create any issue in starting.
·      Enter in your project using command prompt again and type “ionic run android”.


     Android Platform will be run. Enjoy the android platform using HTML 5.

I f you want to run the IOS platform with ionic then take a look below requirement.
·         Before installing the IOS platform you need high quality system as first of all you will have installed the virtual machine using Oracle or VMware virtual machine solution.

·         After making the virtual machine install MAC OS in it and install xcode..
After that you will be able to run the IOS platform using Ionic framework.
I will suggest you to use the APPLE hardware for IOS platform as it will be a long process and may be you can face lots of issue during installation, configuration and testing too.            
    

Hope you enjoyed the article. Please type your comments below.

3 comments:

  1. Nice post it's really helpful. It's help me a lot at beginner stage. Thanks for sharing this post.

    ReplyDelete
    Replies
    1. Your Welcome Bro. Please do let me know if you face any issue.

      Delete
  2. Nice... helped a lot during installation as no where i can see the full installation method about Ionic installation. Just 2-3 commands given everywhere but you have explained very well. It helped me a lot and i think it will help the people getting started with Ionic and cordova framework.

    ReplyDelete

Copyright © 2017 | Aayush Kamboj. Powered by Blogger.