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
An open-source mobile UI toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web.
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.
Install Ionic on Ubuntu 20.04
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 curl, wget or 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 14.x.
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.
Ionic requires Apache cordova. If you don’t know, Apache Cordova is a set of device APIs that allow a mobile app developer to access native device functions such as the camera or accelerometer from JavaScript.
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
Creating a new app with Ionic
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
ionic start
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.
cd [project_name]
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://localhost:8000 or http://your-server:8000 and you will see the following.
So, enjoy it.
Conclusion
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.
