29.8 C
Texas
angeloma
Senior Writer and partner

How to Install Ionic Framework on Ubuntu 20.04?

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.

- Advertisement -

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
1.- Installing Ionic on Ubuntu 20.04
1.- Installing Ionic on Ubuntu 20.04

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.

2.- Ionic app installed
2.- Ionic app installed

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.

3.- Ionic framework
3.- Ionic framework

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article