Step-by-Step Guide to Install Ionic Framework with Capacitor
Step 1: Install Node.js
Ionic and Capacitor require Node.js and npm for installation and development.
1. Download and Install Node.js:
o Visit the Node.js official website.
o Download the LTS (Long Term Support) version for stability.
o Install it following the instructions for your operating system (Windows,
macOS, or Linux).
o Verify the installation in a terminal:
bash
Copy
node --version
npm --version
This should show the installed versions of Node.js and npm.
Step 2: Install the Ionic CLI
The Ionic CLI is used to create, build, and test Ionic apps.
1. Uninstall Previous Ionic CLI (if applicable):
o If you have an older Ionic CLI installed, remove it to avoid conflicts:
bash
Copy
npm uninstall -g ionic
2. Install the Latest Ionic CLI:
o Install the Ionic CLI globally:
bash
Copy
npm install -g @ionic/cli
▪ The -g flag installs it globally for access from any directory.
▪ If you face EACCES permission errors, configure npm to avoid
needing sudo or run with sudo npm install -g @ionic/cli
(macOS/Linux).
3. Verify Installation:
o Check the Ionic CLI version:
bash
Copy
ionic --version
Expect version 8.x or higher in 2025.
Step 3: Install Additional Tools (Optional but Recommended)
For a complete development setup, especially for Capacitor’s native features, install these
tools:
1. Code Editor:
o Install Visual Studio Code for its support of Ionic development, debugging,
and extensions.
2. Git:
o Git is useful for version control.
o On Windows, download Git for Windows.
o On macOS/Linux, verify with git --version. Install if needed (e.g., sudo apt
install git on Ubuntu or brew install git on macOS).
3. Platform-Specific Tools for Capacitor:
o Android:
▪ Install Android Studio to get the Android SDK.
▪ Set up an Android emulator or connect a physical device.
o iOS (macOS only):
▪ Install Xcode for the iOS SDK.
▪ Ensure you have a valid Apple Developer account for signing iOS
apps.
Step 4: Create a New Ionic Project with Capacitor
1. Start a New Project:
o Create a new Ionic project with Capacitor enabled by default:
bash
Copy
ionic start myApp blank --type=angular --capacitor
▪Replace myApp with your project name.
▪blank creates a simple starter app (other options: tabs, sidemenu).
▪--type=angular specifies the framework (use react or vue if
preferred).
▪ --capacitor explicitly sets Capacitor as the native runtime (this is the
default in recent Ionic versions, but included for clarity).
2. Navigate to the Project Directory:
o Move into the project folder:
bash
Copy
cd myApp
Step 5: Set Up Capacitor
Capacitor is included by default in the project, but you need to initialize it for native
platforms.
1. Add Platforms (Android/iOS):
o For Android:
bash
Copy
ionic capacitor add android
o For iOS (macOS only):
bash
Copy
ionic capacitor add ios
▪
These commands create the android and ios folders in your project,
setting up the native projects.
2. Sync the Web App with Native Projects:
o Copy the web assets to the native projects:
bash
Copy
ionic capacitor sync
▪ This command builds the web app and copies it to the Android/iOS
projects, also installing any Capacitor plugins defined in
package.json.
Step 6: Test the App with ionic serve -o
1. Run the Development Server:
o Start the Ionic development server to test the app in a browser:
bash
Copy
ionic serve -o
▪ The -o flag opens the app in your default browser (e.g.,
http://localhost:8100).
▪ The server supports live reload, updating the browser when you
modify files in the src directory.
2. Verify the App:
o The browser should display the Ionic app based on the chosen template.
o Edit files (e.g., src/app/app.component.html) and save to see changes
reflected instantly.
Step-by-Step Guide to Consume the Pokémon API and Display Data in a Card
Create a project with Angular and Capacitor:
ionic start pokemonApp blank --type=angular –capacitor
cd pokemonApp
Step 1: Install HTTP Client for API Calls
To consume the Pokémon API, use Angular’s HttpClient module.
Ensure HttpClientModule is Imported:
The HttpClientModule is included by default in Angular projects. Verify it’s imported in
src/app/app.module.ts:
typescript
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
// Other imports
HttpClientModule
],
// ...
})
export class AppModule {}
If it’s missing, add HttpClientModule to the imports array.
Step 2: Create a Service to Fetch Pokémon Data
Create a service to handle API calls to the Pokémon API.
Generate a Service:
Run the following command to create a Pokémon service:
bash
ionic generate service services/pokemon
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface Pokemon {
name: string;
id: number;
sprites: {
front_default: string;
};
types: { type: { name: string } }[];
}
@Injectable({
providedIn: 'root'
})
export class PokemonService {
private apiUrl = 'https://pokeapi.co/api/v2/pokemon/';
constructor(private http: HttpClient) {}
getPokemon(name: string): Observable<Pokemon> {
return this.http.get<Pokemon>(`${this.apiUrl}${name.toLowerCase()}`);
}
}
