Ionic Framework is a free and 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 your Debian 11 Bullseye, its dependencies, create a project, and learn how to start the test application.
Prerequisites
- Recommended OS: Debian 11 Bullseye
- User account: sudo or root access
- Required Packages: curl, gnupg2 wget & Node.js
Updating Operating System
First, before anything, update your Debian operating system to make sure all existing packages are up to date:
sudo apt update && sudo apt full-upgrade -yInstall Required Depenencies
To ensure the installation goes smoothly as per following our tutorial, run the following command, which will install any missing packages:
sudo install curl gnupg2 wget -yInstall Node.js 14 LTS on Debian 11
The Ionic framework will need Node.js installed. Debian 11 does not come with the latest updated versions in its repository, so installing Node.js from the source is recommended. To do this, follow the steps below:
Add the Node.js repository using the following command:
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
If you prefer to install the latest NON-LTS Node.js release, which is version 16, use the following instead:
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -Now that you have installed the repository, install Node.js as follows:
sudo apt install nodejsConfirm the version and build of Node.js that was installed:
node --versionExample output:
v14.17.5Install Cordova using NPM On Debian 11
You need to install Cordova to your Debian 11 operating system using the NPM command. This will also install all dependencies required:
sudo npm install -g cordovaInstall Ionic Framework on Debian 11
To install the Ionic framework, run the following command:
sudo npm i -g @ionic/cliNote, @ionic/cli is the new name of the package if you have installed it previously.
Lastly, check the version with the following:
ionic -vExample output:
6.17.0Create a Project Test
To test Ionic, the best way to do this is to create a quick small project. To do this, follow the steps as below:
First, start Ionic:
ionic startNext, you will be prompted with a creation wizard, type N, and enter the key to proceed:
Now you will be prompted to pick a framework as per below:
Select the framework you want to work with, and this 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 && ionic serve --host 0.0.0.0 --port 8100Note, replace ./HelloWorld 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:
http://server-ip:8100Your Internet Browser page should be similar to below:
And that’s is it, 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.
