{"id":4925,"date":"2018-06-18T15:50:42","date_gmt":"2018-06-18T11:50:42","guid":{"rendered":"https:\/\/www.howtoforge.com\/tutorial\/ubuntu-ionic-framework\/"},"modified":"2018-06-18T15:50:42","modified_gmt":"2018-06-18T11:50:42","slug":"how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts","status":"publish","type":"post","link":"https:\/\/afaghhosting.net\/blog\/how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts\/","title":{"rendered":"How to Install Ionic Mobile App Framwork on Ubuntu 18.04 LTS"},"content":{"rendered":"<p>Ionic is an open-source Framework that can be used for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Ionic provies a powerful command-line interface that can be used for creating a project with a simple command. Ionic supports Android, IOS and the Universal Windows Platform for developing app. Ionic uses Cardova plugins to access Camera, GPS and Flashlight.<\/p>\n<p>In this tutorial, we will learn to install Ionic framework on Ubuntu 18.04 (Bionic Beaver).<\/p>\n<h2 id=\"requirements\">Requirements<\/h2>\n<ul>\n<li>A server running Ubuntu 18.04 to your system.<\/li>\n<li>A non-root user with sudo privileges.<\/li>\n<\/ul>\n<h2 id=\"install-nodejs-and-cordova\">Install Node.js and Cordova<\/h2>\n<p>First, you will need to install Node.js to your system. By default, the latest version of the Node.js is not available in Ubuntu 18.04 default repository. So, you will need to add PPA for node.js to your system.<\/p>\n<p>You can add the Node.js PPA using the following command:<\/p>\n<p class=\"command\">sudo apt-get install python-software-properties -y<br \/>curl -sL https:\/\/deb.nodesource.com\/setup_8.x | sudo -E bash &#8211;<\/p>\n<p>Next, install the Node.js using the following command:<\/p>\n<p class=\"command\">sudo apt-get install nodejs -y<\/p>\n<p>Next, you will need to install Cordova to your system. You can install it with the following command:<\/p>\n<p class=\"command\">sudo npm install -g cordova<\/p>\n<h2 id=\"install-ionic-framework\">Install Ionic Framework<\/h2>\n<p>Ionic comes with a convenient command line utility to start, build, and package Ionic apps. You can install it by just running the following command:<\/p>\n<p class=\"command\">sudo npm install -g ionic<\/p>\n<p>Once the Ionic is installed, you can check the version of Ionic using the following command:<\/p>\n<p class=\"command\">ionic -v<\/p>\n<p>Output:<\/p>\n<pre>3.20.0&#13;\n<\/pre>\n<h2 id=\"create-project-with-ionic\">Create Project with Ionic<\/h2>\n<p>Next, you will need to create a new Cordova project somewhere on the computer for the code for your app: You can do this with the following command:<\/p>\n<p class=\"command\">ionic start HelloWorld blank<\/p>\n<p>The above command will create a directory HelloWorld.<\/p>\n<p>Next, change the directory to the HelloWorld and list the contents:<\/p>\n<p class=\"command\">cd HelloWorld\/<br \/>ls -l<\/p>\n<p>You should see the following output:<\/p>\n<pre>total 260&#13;\n-rw-r--r-- 1 3434 3434 92 Jun 9 15:43 ionic.config.json&#13;\ndrwxr-xr-x 536 root root 20480 Jun 9 15:46 node_modules&#13;\n-rw-r--r-- 1 3434 3434 1135 Jun 9 15:43 package.json&#13;\n-rw-r--r-- 1 root root 224175 Jun 9 15:46 package-lock.json&#13;\ndrwxr-xr-x 6 3434 3434 4096 Jun 9 15:43 src&#13;\n-rw-r--r-- 1 3434 3434 519 May 30 23:39 tsconfig.json&#13;\n-rw-r--r-- 1 3434 3434 178 May 30 23:39 tslint.json&#13;\n<\/pre>\n<p>Next, enable Android platform and building the project for Android with the following command:<\/p>\n<p class=\"command\">ionic platform add android<br \/>ionic cordova build android<br \/>ionic cordova emulate android<\/p>\n<p>That&#8217;s it! You can now easily build your app.<\/p>\n<div>\n<p><b>Share this page:<\/b><\/p>\n<p>\n<a href=\"https:\/\/www.facebook.com\/sharer.php?u=https%3A%2F%2Fwww.howtoforge.com%2Ftutorial%2Fubuntu-ionic-framework%2F\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/afaghhosting.net\/blog\/wp-content\/uploads\/2018\/06\/how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts.png\" height=\"20\" alt=\"\" title=\"\"><\/a><br \/>\n<a href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.howtoforge.com%2Ftutorial%2Fubuntu-ionic-framework%2F&amp;text=How+to+Install+Ionic+Mobile+App+Framwork+on+Ubuntu+18.04+LTS&amp;via=howtoforgecom&amp;related=howtoforgecom\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/afaghhosting.net\/blog\/wp-content\/uploads\/2018\/06\/how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts-1.png\" height=\"20\" alt=\"\" title=\"\"><\/a><br \/>\n<a href=\"https:\/\/twitter.com\/howtoforgecom\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/afaghhosting.net\/blog\/wp-content\/uploads\/2018\/06\/how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts-2.png\" height=\"20\" alt=\"\" title=\"\"><\/a><br \/>\n<a href=\"https:\/\/plus.google.com\/share?url=https%3A%2F%2Fwww.howtoforge.com%2Ftutorial%2Fubuntu-ionic-framework%2F\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/afaghhosting.net\/blog\/wp-content\/uploads\/2018\/06\/how-to-install-ionic-mobile-app-framwork-on-ubuntu-18-04-lts-3.png\" height=\"20\" alt=\"\" title=\"\"><\/a>\n<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ionic is an open-source Framework that can be used for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Ionic provies a powerful command-line interface that can be used for creating a project with a simple command. Ionic supports Android, IOS and the Universal Windows Platform for developing app. Ionic uses Cardova [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-4925","post","type-post","status-publish","format-standard","hentry","category-36"],"_links":{"self":[{"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/posts\/4925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":0,"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/posts\/4925\/revisions"}],"wp:attachment":[{"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/media?parent=4925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/categories?post=4925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/afaghhosting.net\/blog\/wp-json\/wp\/v2\/tags?post=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}