How to Install Ionic Framework on Ubuntu 22.04 LTS

Ionic Framework is an open-source toolkit for building performing, high-quality mobile and desktop apps. Ionic comes with integrations for popular frameworks like Angular, React, and Vue and is one of the more popular frameworks amongst developers today in the mobile applications field.

In the following tutorial, you will learn how to install Ionic Framework on Ubuntu 22.04 LTS Jammy Jellyfish and its dependencies, create a project and learn how to start the test application.

Update Ubuntu

First, before anything, update your system to make sure all existing packages are up to date to avoid any conflicts.

sudo apt update && sudo apt full-upgrade -y

Install Required Dependencies

Next, to ensure the installation goes smoothly following our tutorial, run the following command, which will install any missing packages that may be required.

sudo apt install curl gnupg2 gnupg wget -y

Install Node.js

The Ionic framework will need Node.js installed. Ubuntu 22.04 LTS does come with Node.js available, but for the tutorial, you will install either the current stable mainline version or the latest long-term release (LTS) version.

Import either current or lts Node.js version; I recommend the current repository.

Option 1 – Import Node.js – Current

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

Option 2 – Import Node.js – LTS

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -

Next, run a quick APT update to reflect the newly added imports.

sudo apt update

Now that you have installed the repository install Node.js as follows.

sudo apt install nodejs

Confirm the version and build of Node.js that was installed.

node --version

Lastly, ensure your NPM is up-to-date using the following command; this is critical; do not skip.

sudo npm install npm@latest -g

Install Cordova with NPM

Before proceeding further, you need to install Cordova using the NPM command. This will also install all dependencies required.

sudo npm install -g cordova

Install Ionic Framework

To install the Ionic framework, run the following command.

sudo npm i -g @ionic/cli

Note, @ionic/cli is the new name of the package if you have installed it previously.

Lastly, check the version with the following.

ionic -v

Create a Project Test

To test Ionic, the best way to do this is to create a quick small project, which you can find in the following steps below.

First, start the Ionic framework.

ionic start

Note you will be prompted with a creation wizard, type N, and enter the key to proceed.

Next, you will be prompted to pick a framework.

Example:

Select the framework you want to work with, which will install all software and dependencies required.

You will be prompted to name your project as below.

Example:

Enter your project name and press enter to proceed.

In the last part, you will be prompted to select if you like a starter template.

Example:

Select the starter template for your project, use the arrow keys to navigate, and press the enter key to finish.

Note, you will be prompted if you would like to create an Ionic forums account, type Y or N, then you will come to the finished output of your app is ready.

Example:

Start Your Application Test

Now that your app is ready, CD into the directory and start the application.

cd ./HelloWorld-LinuxCapable.com && ionic serve --host 0.0.0.0 --port 8100

Note, replace ./HelloWorld-LinuxCapable.com with your application name.

Once the app has finishing compiling, you will get the following output.

Example:

Now, this should automatically launch your web browser and access your application. If this does not occur, use the following URL.

http://server-ip:8100

Replace the server IP with localhost if you are having issues connecting.

Example:

And that is, you have installed and successfully created a test project.

Comments and Conclusion

In the tutorial, you learned how to install the Ionic framework, the dependencies with Node.js, create a project, and start it. Ionic Framework is the most popular cross-platform mobile development framework available today and should be looked at if you are serious about creating mobile applications.

More information can be found by visiting the official documentation.