My experience on my daily works... helping others ease each other

Thursday, March 2, 2017

Get start with ionic framework

When I first developed apps using ionic, not many resources over the net will provide good explanation on it. I've found one and it is very easy to understand.

Here is the structure of ionic framework after it successfully execute ionic start command; for example 

ionic start myfirst blank --v2

>> ionic start [your_apps_name] [template] [ionic_framework_version]

the command will create a new folder (myfirst) and construct the following structures

├── hooks // custom cordova hooks to execute on specific commands 
├── platforms // iOS/Android specific builds will reside here 
├── plugins // where your cordova/ionic plugins will be installed 
├── resources // icon and splash screen 
├── scss // scss code, which will output to www/css/
 |── www // application - JS code and libs, CSS, images, etc. 
      |---------css //customs styles 
      |---------img //app images 
      |---------js //angular app and custom JS 
      |---------lib //third party libraries 
      |---------index.html //app master page 
├── bower.json // bower dependencies 
├── config.xml // cordova configuration 
├── gulpfile.js // gulp tasks 
├── ionic.project // ionic configuration 
├── package.json // node dependencies


Following are current potential templates that you can use:
  • tabs : a simple 3 tab layout
  • sidemenua layout with a swipable menu on the side
  • blanka bare starter with a single page
  • superstarter project with over 14 ready to use page designs
  • tutoriala guided starter project

Once it is completed, you will get to see the following message appear:
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
Downloading: https://github.com/driftyco/ionic2-starter-                   sidemenu/archive/master.zip                                                
Installing npm packages (may take a minute or two)...                      
-                                                                          
♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫                          
                                                                           
Some helpful tips:                                                         
                                                                           
Run your app in the browser (great for initial development):               
  ionic serve                                                              
                                                                           
Run on a device or simulator:                                              
  ionic run ios[android,browser]                                           
                                                                           
Share your app with testers, and test on device easily with the Ionic View companion app:                                                             
  http://view.ionic.io                                                     

Yeah... now you test your apps. Just run ionic serve to view on your browser. It will pop-up your browser and automatically navigate to http://localhost:8100 ... else, you can open your browser and go to the address.

If you want to view in mobile, you may use mobile emulator or deploy on your mobile. Before that, do install mobile platform package first. To do that, run the following command:

                                                                       
ionic platform add ios  // to add ios platform into the package      
                                                                     
ionic platform add android //to add android platform into the package  
                                                                       

Finally, you are ready to run (on emulator or actual device).


                                                                           
ionic run android --prod --release //to run on emulator as production mode 
                                                                           
ionic build android --prod --release //to build as package for installation
                                                                           

For ios, it will require more steps and you can follow it https://ionicframework.com/docs/v2/intro/deploying/.

Lets dance... :)
Share:

11 comments:

abuarif said...

This is really good. I managed to get it running as well. Hope to have more in the future.

Unknown said...

Nice Information thank you for Sharing useful information. Great job.
Web developer Malaysia

Marjorie Geiser said...

Today all the questions about ionic framework like what is it? It's great framework and Completely free, Open Source which is built on Angular.

Do your next Ionic project from trusted App Developers in Calgary - Devolve

Jeevitha S said...

Even beginners can easily start with ionic project through this blog. Thanks for the effort.

If you have any ideas or suggestions regarding Ionic, have a look at Way2Smile - Trusted App Development Company in Chennai.

Kavi Priya said...

I think it's awesome someone is finally taking notice of our vet's and doing something to help them. I hope all goes well with these articles. More new information i will get after refer that post.
Mobile App Development Company in Dubai
Android App Development Company in Dubai

Amit said...

Thanks for posting this info., its is very helpful for all of us.keep update with your blogs.


Ecommerce Website Design Company in Bangalore
SEO Company in Bangalore
ERP Software Companies in Bangalore
CRM Software in Bangalore

theninehertz said...

Thanks for your great blog. But you can also find something new for ionic framework app development that is easily available and can learn very partly. It is cost-efficient and reduces the need for maintenance too.

Syntrino said...



Thanks for your post. This is excellent information.
Android App Development Company Malaysia
Best Software Testing Company
Software Development Service Company in Malaysia

Syntrino said...


Wow finally i got good article about android development process from beginning.Thanks for sharing
Android App Development Company Malaysia |Singapore

Syntrino said...

Wow finally i got good article about android development process from beginning.Thanks for sharing
Android App Development Company Malaysia
Software Testing Companies In Malaysia
Custom Software Development Company Malaysia

Gadget Sick said...

Excellent blog post. You have shared very useful information with us. For more information, you can contact us today. We are also one of the top service provider of ionic, react native app development and provide the best services at your doorstep.

Ionic App Development Company New York
React Native App Development Company New York
Ionic App Development New York

About Me

Somewhere, Selangor, Malaysia
An IT by profession, a beginner in photography

Blog Archive

Blogger templates