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.

7 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

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

Most Reading

Labels