Hello, friends. In this post, you will learn how to install Ionic Framework on Ubuntu 20.04. This tool allows you to deploy projects with other frameworks like Angular.
According to the Ionic website
So with Ionic, we can develop applications with web technologies compatible with iOS, Android, or the web itself. It has a powerful CLI tool with which we can manage and create projects.
Free and open-source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast highly interactive apps. So products made with Ionic are modern, flexible, and visually pleasing.
So, this Framework is quite powerful and you should know how to use it.
The installation of Ionic is quite simple to perform, we just have to open a terminal and start updating the distribution
sudo apt update sudo apt upgrade
Now install some necessary packages like
git. This last one is vital because, without it, Ionic will not work.
sudo apt install curl gnupg2 wget git
The next step is to install NodeJS. The version I have chosen is
So, add the repository of this version
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Now, install NodeJS, by running
sudo apt install nodejs Reading package lists... Done Building dependency tree Reading state information... Done The following NEW packages will be installed: nodejs 0 upgraded, 1 newly installed, 0 to remove and 22 not upgraded. Need to get 25.0 MB of archives. After this operation, 121 MB of additional disk space will be used.
Since we already have NodeJS installed, then install Cordova by running
sudo npm install -g cordova npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated [email protected]: this library is no longer supported npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. /usr/bin/cordova -> /usr/lib/node_modules/cordova/bin/cordova + [email protected] added 491 packages from 266 contributors in 35.341s
Now install Ionic by running
sudo npm i -g @ionic/cli /usr/bin/ionic -> /usr/lib/node_modules/@ionic/cli/bin/ionic + @ionic/[email protected] added 212 packages from 157 contributors in 16.663s
In the end, you can check the installed version
ionic -v 6.16.3
The best way to know if the installation has been successful is to create a new app. To do this, just run the following command
When executing this command, you will have to define what type of project it is, if it is with Angular, Vue, or another. Also, you will have to give a name to your project and choose the template.
In the end, you will have an output screen similar to this one.
This will generate a folder with the name of your project. Access it to see the structure of the project.
To visualize the project, run
ionic serve --host 0.0.0.0.0 --port 8000
In this case, I am defining that any host can access port
8000. If you have installed Ionic on a server, this command will help you
Finally, open your web browser and go to
http://your-server:8000 and you will see the following.
So, enjoy it.
Ionic is a modern, beautiful framework that allows us to develop cross-platform applications simply and elegantly. Now it’s up to you to take full advantage of it.