How to Install Ionic Framework on Ubuntu Linux

This post shows students and new users steps to install and use Ionic Framework on Ubuntu Linux.

If you don’t already know about Ionic Framework, it’s an open-source, cross-platform mobile development framework that you use to initialize, develop and maintain Angular, React, Vue applications easily on compatible systems.

With Ionic, you can create apps with HTML, CSS, and JavaScript and deploy across platforms, including Android, iOS and other devices.

Installing Ionic Framework is also easy and straightforward. Ionic apps are created and developed primarily through the Ionic command-line utility.

To get started with Ionic Framework, the only requirement is a Node & npm environment.

Below is how to install and use Ionic Framework on Ubuntu Linux.

How to install and use Ionic Framework on Ubuntu Linux

As mentioned above, Ionic Framework is an open-source, cross-platform mobile development framework that you use to initialize, develop and maintain Angular, React, Vue applications easily on compatible systems.

Here’s how to install it on Ubuntu Linux.

First, open Ubuntu command line console and run the commands below to install NVM.

curl  | bash 

Next, run the commands to activate the NVM environment within your profile.

source ~/.bashrc

Once the environment is activated, run the commands below to install Node.js.

As of this writing, Ionic latest LTS version and supports Node.js 14 and 16 LTS versions.

For this post, we’re going to be installing Node.js version 16 LTS. Run the commands below to do so.

nvm install v16

After installing, you can check the version of Node.js and NPM using the commands below:

node -v
npm -v

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.

npm uninstall -g ionic

Once Node.js and NPM are installed, run the commands below to install the latest Ionic.

npm install cordova --location=global
npm install @ionic/cli --location=global 

Check Ionic version by running the commands below.

ionic -v

That should display an output similar to the lines below:

6.20.1

To create, build, and serve a new, basic Ionic project on a development server, go to the parent directory of your new workspace use the following commands:

ionic start my-first-project
cd my-first-project
ionic serve

Replace my-first-project with the name of the project folder you wish to use.

Once you start a new project, you’ll be prompted to choose a framework and template:

  Pick a framework! 😁

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for
the --type option.

? Framework: Angular

Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass
this prompt next time, supply template, the second argument to ionic start.

? Starter template: 
  tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the content area 
❯ blank        | A blank starter project 
  list         | A starting project with a list 
  my-first-app | A template for the "Build Your First App" tutorial 

After a successful build, you should see similar lines as below:

In your browser, open to see the new application run.

When you use the ionic serve command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.

That should do it!

Conclusion:

This post showed you how to install and use Ionic Framework on Ubuntu Linux. If you find any error above or have something to share, please use the comment form below.