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.
Table of Contents
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
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.
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.
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.
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.
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.
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.
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.
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.
Now, this should automatically launch your web browser and access your application. If this does not occur, use the following URL.
Replace the server IP with localhost if you are having issues connecting.
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.