How to Install Ionic Framework on Ubuntu 20.04?

Developers need tools to help them create applications in the best possible way. That is why there are different frameworks. Although we have recently discussed CakePHP, today we will bring up a very peculiar one because it is focused on mobile. In this post, you will learn how to install Ionic framework in Ubuntu 20.04.

What is Ionic Framework?

Ionic is a framework that helps us with the development of hybrid applications for mobile operating systems but using web technologies. In other words, it allows us to develop applications for iOS, Android, and the web, from a single code base.

As you can see, it is very versatile and helps developers to deploy their applications in various environments with a single code base.

The web technologies used by Ionic are CSS, JS, and HTML. About JavaScript, it integrates seamlessly with Vue, Angular and ReactJS, reducing the learning curve.

Today you will learn how to install it.

Install Ionic Framework on Ubuntu 20.04

Installing some necessary packages

First, before starting with the installation, you have to install some packages so that the installation can happen.

sudo apt update
sudo apt install curl gnupg2 wget git

Among these packages is git which is very necessary to create the whole Ionic package.

Installing NodeJS on Ubuntu 20.04

Ionic requires NodeJS to work, so we need to install it. In my case, I will install version 16.x but it must work with others.

First, add the repository for version 16.

curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -

Thereafter, you can install NodeJS by running the following command

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 49 not upgraded.
Need to get 26.2 MB of archives.
After this operation, 122 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_16.x focal/main amd64 nodejs amd64 16.14.0-deb-1nodesource1 [26.2 MB]
Fetched 26.2 MB in 0s (69.2 MB/s)

Now NodeJS is installed and we can continue.

Cordova is also required for Ionic

Once we have NodeJS and therefore NPM, we can continue with the installation of Cordova.

According to the Apache Cordova website:

Cordova is an open-source mobile development framework. It allows you to use standard web technologies – HTML5, CSS3, and JavaScript for cross-platform development.

So, it’s not surprising that Cordova is a requirement for installing Ionic. To install it, just run the following command.

sudo npm install -g cordova
Install Cordova on Ubuntu 20.04
Install Cordova on Ubuntu 20.04

When the installation is finished, we can continue.

Install Ionic Framework in Ubuntu 20.04

With all the dependencies covered, we can install Ionic Framework in Ubuntu 20.04 just by running the following command

sudo npm i -g @ionic/cli

You can verify the installed version by running

ionic -v

Sample Output

6.18.2

Creating a new project with Ionic

Now we just need to start working. First, we will create a new project by running

ionic start

It will ask us if we want to use the wizard. I have chosen N.

During the execution of the command, we will be asked the JS framework to use, the name of the project and the template to use.

At the end and if there is no error, you will see an output screen like this:

Install Ionic Framework on Ubuntu 20.04
Install Ionic Framework on Ubuntu 20.04

This will create a new folder with the name of your project. Access it and serve the project.

cd [project-name] 
ionic serve

Now, the application will be available at http://localhost:8000.

If you installed Ionic on a virtual machine or on a server, you can specify the host and the port

ionic server --host [ip-address] --port [port] 

Then, open a web browser and access the address you set for Ionic and you will see it working.

Ionic Framework running
Ionic Framework running

Now yes, Ionic is working correctly, and we will be able to work.

Conclusion

Thanks to this post, you learned how to install ionic Framework in Ubuntu 20.04 using a simple and straightforward method. I hope you found the post useful, and it would help us a lot if you share it and comment.

Share This:

Leave a Comment

Your email address will not be published.