How to Install Ionic Framework on Debian 11 Bullseye

Ionic Framework is an open-source toolkit for building high-quality mobile and desktop apps. Ionic comes with integrations for popular frameworks like Angular, React, and Vue. Developers use ionic to create performant, cross-platform applications for various purposes. Ionic has a wide range of features and functionality, making it a popular choice for developers looking to develop mobile apps. Amongst its many features, Ionic allows developers to create sophisticated user interfaces, use powerful hardware features, and take advantage of native app functionality. Additionally, Ionic’s community of developers and active user base contribute to its popularity; developers can find a wealth of resources and support when using Ionic. In sum, Ionic Framework is a powerful toolkit that enables developers to build performant, high-quality mobile apps.

In the following tutorial, you will learn how to install Ionic Framework on Debian 11 Bullseye and its dependencies, create a project, and start the test application.

Update Debian

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

sudo apt update && sudo apt full-upgrade

Install 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. Debian 11 Bullseye 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

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.

Optionally, check the version with the following.

ionic -v

Lastly, it is worth mentioning that you should use the following command to check for updates when working with NPM packages, do not forget about it in the future, as security audits and updates are important.

sudo npm install npm@latest -g

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:

Once complete, you should get a similar output.

Example:

Start Your Application Test

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

cd ./LinuxCapable-test && 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

If you’re looking for a powerful and versatile open-source framework to build your mobile or desktop applications with, Ionic is well worth considering. With its huge range of integrations and plethora of features, it’s hard to beat Ionic when building performant apps that look great.

More information can be found by visiting the official documentation.