X
    Categories: AngularjsIonic

How to install ionic in mac

How to install ionic in mac

How to install ionic in mac, ionic is the top rated hybrid app development  tool. Ionic uses the HTML5 sdk to build native mobile apps by using HTML,css and javascript. Ionic requires angular js to work as middleware. Main advantage in Ionic is with the same code it will build the app for both IOS and ANDROID.

Before install ionic we need following packages are installed in your system

1. Node
2. Npm
3. Cordova

How to install Node and Npm

Click to check how to install node and npm.

To check npm and node install in your system, run below command

For Npm :

npm -v

For Node :

node -v

How to install Cordova

Run the below command in terminal

sudo npm install -g cordova

sudo may required password.

How to install Ionic

Ionic has command line utility to start, build and package ionic apps.

sudo npm install -g ionic

It will install ionic utilities in your npm

Create Ionic new App 


Just run the below command and it will create the project folder

ionic start ionic-projects blank

It will create the folder ionic-projects in the directory of command line runs and will create the needed files inside the directory.

Your folder structure will be,

---------- bower.json
---------- hooks
---------- package.json
---------- resources
---------- config.xml
---------- ionic.config.json
---------- platforms
---------- scss
---------- gulpfile.js
---------- node_modules
---------- plugins
---------- www

Inside www folder you can write your application code.

How to run

ionic serve

or

ionic serve --lab

It will run the application in your browser.

By running below command you can check available tasks of ionic.

ionic --lab
   start  ..........  Starts a new Ionic project in the specified PATH
   serve  ..........  Start a local development server for app dev/testing
   setup  ..........  Configure the project with a build tool (beta)
   generate  .......  Generate pages and components
   platform  .......  Add platform target for building an Ionic app
   run  ............  Run an Ionic project on a connected device
   emulate  ........  Emulate an Ionic project on a simulator or emulator
   build  ..........  Build (prepare + compile) an Ionic project for a given platform.

   plugin  .........  Add a Cordova plugin
   resources  ......  Automatically create icon and splash screen resources (beta)
          Put your images in the ./resources directory, named splash or icon.
          Accepted file types are .png, .ai, and .psd.
          Icons should be 192x192 px without rounded corners.
          Splashscreens should be 2208x2208 px, with the image centered in the middle.

   upload  .........  Upload an app to your Ionic account
   share  ..........  Share an app with a client, co-worker, friend, or customer
   lib  ............  Gets Ionic library version or updates the Ionic library
   login  ..........  Login to your Ionic account
   io  .............  Integrate your app with Ionic Cloud services
   security  .......  Store your app's credentials for the Ionic Cloud
   push  ...........  Upload APNS and GCM credentials to Ionic Push
   package  ........  Use Ionic Package to build your app
   config  .........  Set configuration variables for your ionic app
   service  ........  Add an Ionic service package and install any required plugins
   add  ............  Add an Ion, bower component, or addon to the project
   remove  .........  Remove an Ion, bower component, or addon from the project
   list  ...........  List Ions, bower components, or addons in the project
   info  ...........  List information about the users runtime environment
   help  ...........  Provides help for a certain command
   link  ...........  Sets your Ionic App ID for your project
   hooks  ..........  Manage your Ionic Cordova hooks
   state  ..........  Saves or restores state of your Ionic Application using the package.json file
   docs  ...........  Opens up the documentation for Ionic

Hope it will help for someone. Happy Coding!!!

 

Marimuthu: