Ionic is a popular open-source framework for building cross-platform mobile applications using web technologies such as HTML, CSS, and JavaScript. It leverages Angular, React, or Vue.js to create high-quality, native-like user interfaces. Fedora is a community-driven Linux distribution that serves as a foundation for the commercial Red Hat Enterprise Linux (RHEL). In this article, we will guide you through the process of installing Ionic on Fedora, along with creating a simple sample application.
Prerequisites
Before you can install Ionic on Fedora, make sure you have the following prerequisites:
- A system running Fedora (version 33 or higher is recommended).
- A user account with sudo privileges.
Step 1: Update the system
First, update your Fedora system by running the following command:
sudo dnf update -y
This command will ensure that your system has the latest updates and security patches.
Step 2: Install Node.js
Ionic requires Node.js, a JavaScript runtime, to run. Install Node.js using the following command:
curl -sL https://rpm.nodesource.com/setup_18.x | sudo -E bash -sudo dnf install nodejs
After the installation is complete, you can verify the Node.js version by running:
node -v
Step 3: Install Ionic CLI
Ionic CLI (Command Line Interface) is a tool that helps you create, develop, and manage Ionic applications. Install the Ionic CLI globally on your system using NPM:
sudo npm install -g @ionic/cli
Once the installation is complete, verify the Ionic CLI version by running:
ionic -v
Step 4: Create a new Ionic project
Now that you have Ionic installed, you can create a new Ionic project. To do this, run the following command:
ionic start mySampleApp blank --type=angular
Replace ‘mySampleApp’ with the desired name for your application. This command will create a new directory with the specified name and set up an Ionic project with a blank template using Angular.
Step 5: Navigate to the project directory
Navigate to the newly created project directory:
cd mySampleApp
Step 6: Run the Ionic application
To run the Ionic application in your web browser, use the following command:
ionic serve
This command will open your default web browser and display your Ionic application.
Step 7: Create a sample application
To create a simple sample application, open the “src/app/home/home.page.html” file in your favorite text editor and replace its content with the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <ion-header [translucent]="true"> <ion-toolbar> <ion-title> My Sample App </ion-title> </ion-toolbar> </ion-header> <ion-content [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">My Sample App</ion-title> </ion-toolbar> </ion-header> <div id="container"> <ion-button (click)="showAlert()">Click me!</ion-button> </div> </ion-content> |
Next, open the “src/app/home/home.page.ts” file in your text editor and replace its content with the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { Component } from '@angular/core'; import { AlertController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(public alertController: AlertController) {} async showAlert() { const alert = await this.alertController.create({ header: 'Hello!', message: 'This is a sample Ionic application.', buttons: ['OK'] }); await alert.present(); } } |
In this sample application, we have added an Ionic button that, when clicked, displays a simple alert with a message.
Step 8: Test the sample application
Now that you have created the sample application, run it again in your web browser by executing the following command from the project directory:
ionic serve
Your web browser should open and display the updated Ionic application. Click the “Click me!” button to see the alert with the message.
Conclusion
In this article, we have demonstrated how to install Ionic on Fedora and create a simple sample application. You are now ready to start developing cross-platform mobile applications using the Ionic framework. With this foundation, you can create high-quality, native-like user interfaces for your mobile applications on Fedora.