Set Up Mobile App Development Environment for Ionic Framework

Thursday, 21 September 2017

Technology is growing very fast. Also development mode of Mobile application also changed. With very less effort now we can build cross platform mobile apps. Today there a lots of technology in the market like React Native, Ionic Framework, Native Script which gives us a environment to develop cross platform mobile apps which work on Android , ios like native apps.
Here we provide a complete guide to set up development environment for Ionic Framework.

What is Ionic Framwork?
Ionic is a open source framwork to build amazing cross platform mobile appps. Before staring Ionic framwork you should have knowledge of JavaScrict, Angular, TypeScript, HTML and CSS.
Visit Ionic Framwork official site.

Step-1

First of all we need to install Node.js in our system visit Node.js official site to download and install it.
To check successful installation of node.js open 'Command Prompt' if you are using windows or open 'Terminal' for 'MacOS' or 'Linux'.
and type 'node --version' and press enter button. This will show you installed version of node. Node.js comes with npm package you can also check npm package version by typing 'npm --v'.

Step-2

You need to install Ionic Framework in your system. Just open 'Command Prompt' or 'Terminal' and type 'npm install -g cordova ionic' and press enter.You can also individually install by typing 'npm install -g ionic' and 'npm install -g cordova'.

npm install -g cordova ionic
To check successful installation type 'ionic' and 'cordova'. This will show you install version of Ionic Framwork and cordova with description.

Step 3- 

Now create your first ionic app type 'ionic start myApp tabs'.


ionic start myApp tabs

After running this command a project directory is create with name "myApp". 



Now go to project directory and open project with your favorite code editor like Sublime text, Atom or Visual Studio code any one you can prefer.




This is folder structure of your ionic App. All your editable coding stuff is available in 'src' folder.
You can modify, add ,edit stuffs from 'src folder.

Step- 4

To run your app go to to your project directory using cmd or Terminal and just type 'ionic serve --lab'. This will show you web view of app in your browser.


ionic serve --lab


After running this command a dev server is start in your system. And Show you live preview of your application. 



If you face any problem to set up environment just freely comment below. Thank You.

22 comments

  1. Good morning, I have setup all the necessary but the folders created for the project is not complete I.e it does not have www, plugin folder created.
    Moreover, am using windows 7.
    Pls help me out

    ReplyDelete
    Replies
    1. Hi, ISRAELKINGZ TECHNIST,
      www folder will automatically create when you will run project.
      Thank u

      Delete
  2. Hey, Useful resource this blog.
    I'm getting some problems when Ionic serve is starting, get stuck when it says
    "[time] Lint Finished in 8:92s".

    Hope that you can help me

    ~Kev

    ReplyDelete
    Replies
    1. what is actually happening can u explore more.follow this link u can try more commands https://ionicframework.com/docs/cli/serve/

      Delete
  3. Nice to be visiting your blog once more, it has been months for me. Well this article that ive been waited for therefore long. i want this article to finish my assignment within the faculty, and it has same topic together with your article. Thanks, nice share. AC Market

    ReplyDelete
  4. Thanks for the nice blog. It was very useful for me. I'm happy I found this blog. Thank you for sharing with us,I too always learn something new from your post. ActionLinkWireless.com

    ReplyDelete
  5. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. Javascript Online Training from India

    ReplyDelete
  6. It depends on the complexity of the app and your requirements. Would you prefer to give to outsource all the application or only a part of it? I have managed with Front-end and left everything else for litslink.com. They have managed good enough but was a little late with deadlines

    ReplyDelete
  7. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. The Sims Mobile Cheats

    ReplyDelete
  8. Impressive web site, Distinguished feedback that I can tackle. Im moving forward and may apply to my current job as a pet sitter, which is very enjoyable, but I need to additional expand. Regards. Emu4iOS Download

    ReplyDelete
  9. Keep up the good work , I read few posts on this web site and I conceive that your blog is very interesting and has sets of fantastic information. IPALibrary Download

    ReplyDelete
  10. Thank you a bunch for sharing this with all of us you actually realize what you are talking about! Bookmarked. Please also seek advice from my site =). We could have a hyperlink change contract between us! iOS 11.3 Download

    ReplyDelete
  11. When we talk about audience, we are referring to two very separate ideas - the target market for your business and the overall set of people that can actually access mobile apps and mobile optimised websites.
    ShowBox APK 2018

    ReplyDelete
  12. Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. snes4ios

    ReplyDelete
  13. The essential motivation behind why most cell phone clients lean toward the Android cell phone to the tablet is a direct result of the previous' conveyability. tinder failed to delete account

    ReplyDelete
  14. With regards to picking the correct portable application improvement organization, you will dependably discover the advancement cost and application quality to be in struggle. Mobile app development company

    ReplyDelete
  15. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... unlockmobiledevice

    ReplyDelete
  16. lucky patcher apk

    https://luckypatcherappdownload.com/apk-latest/

    ReplyDelete
  17. Once you've overseen and summoned up the strength to sort out your work area, you'll see that it's very satisfying to the eyes – taking a gander at legitimately composed work area. youtube plus plus apk

    ReplyDelete
  18. Most of the people love to surf the internet and for this, they often keep visiting hotstickybun.

    ReplyDelete
  19. One of the fastest growing network provider of UK is Vodafone. Vodafone offers a full range of mobile telecommunications services that include voice and data communications to its subscribers.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...
 

Most Reading

Labels