How to Install Ionic Framework on Ubuntu 22.04

If you’re a web developer looking to create cross-platform mobile apps, then you should check out the Ionic Framework. Ionic Framework is used by over 4 million developers worldwide, making it the fastest-growing app development framework on the market. This open-source development platform allows you to create apps with HTML, CSS, and JavaScript, which can then be deployed on iOS, Android, and Windows Phone devices.

In this article, we’ll show you how to install the Ionic Framework on Ubuntu 22.04 using Node.js and NPM. Let’s get started!

Step 1 – Installing Node.js

Node.js is the primary requirement for running Angular applications. You can install the required Node.js using NVM command-line utility. Log in to your Ubuntu system and follow:

1. Use the following command to install NVM:

   curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 
   

2. Now activate the NVM enviornemnt on your system.

   source ~/.bashrc
   

3. As of today, Angular 14 is the latest version that suport Node.js 14 LTS and 16 LTS versions. Following command will install Node.js 16 on your system.

   nvm install v16
   

Step 2 – Install Ionic Framework on Ubuntu

Next, you need to install the Ionic node module on your system. Ionic provides and commands line utility for creating packages, building, and starting applications.

npm install cordova --location=global 

Run the below NPM command to install the Ionic framework on your system.

npm install @ionic/cli  --location=global 

After completing the installation of the Ionic framework, use the following command to check the installed version.

ionic -v 

6.20.1

Step 3 – Create Ionic Application

Now, You can create a new Ionic application on your Ubuntu system using the starter templates.

1. Use the following command to view available starter templates

   ionic start --list 
   

2. Select a template as per your requirements and create a new Ionic application. You can also choose a blank template to start:

   ionic start myApp my-first-app 
   

   Here myApp is the name of the new applicaiton and my-first-app is the starter template name.

   Output
   Your Ionic app is ready! Follow these next steps:
   
   - Go to your cloned project: cd ./myApp
   - Run ionic serve within the app directory to see your app in the browser
   - Run ionic capacitor add to add a native iOS or Android project using Capacitor
   - Generate your app icon and splash screens using cordova-res --skip-config --copy
   - Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
   - Building an enterprise app? Ionic has Enterprise Support and Features:
   https://ion.link/enterprise-edition
   

3. Now, run the below command to serve the Ionic application.

   cd ionic-app 
   ionic serve 
   

   This will start the Ionic application on port 8100. You can access your ionic application in a web browser using the localhost or system IP address.

   

4. You can also define the host and port while running the Ionic application as below:

   ionic serve --host 0.0.0.0 --port 3005 
   

For more details visit http://ionicframework.com/docs/guide/installation.html

Conclusion

In this tutorial, you have learned to install the Ionic framework CLI on the Ubuntu system. Also, provide you with instructions to create and run a new Ionic application.