Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • What is Ionic Capacitor?
  • How to use Capacitor to deploy your apps?
  • How to build the project with Capacitor?
  • Ionic Capacitor vs Cordova
  • How to remove Capacitor and use Cordova?
  • Ionic Capacitor Plugins

Was this helpful?

Ionic Capacitor

Ionic Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web.

PreviousHow to use this template?NextIonic Code Structure

Last updated 3 years ago

Was this helpful?

From this project uses Capacitor 3.

We strongly . However, if you are not ready yet, don't worry, you can still use Cordova.

What is Ionic Capacitor?

Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. It was created -and is maintained- by the Ionic team.

Capacitor can work with any web project, it’s not specific to Ionic apps.

It provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them. It has full support for PWAs.

It's a spiritual successor to Apache Cordova and Adobe PhoneGap. Its mantra is "Code once, configure everywhere". We love working with Capacitor because the developer experience is incredibly good.

Learn more about .

How to use Capacitor to deploy your apps?

The Capacitor workflow involves a few consistent tasks:

iOS Platform

This app has an iOS folder which contains the iOS native app. Read how to .

Android Platform

How to build the project with Capacitor?

1. Develop and build your Web App

You must build your Ionic project at least once before adding any native platforms.

ionic build

Because our project uses SSR, we don’t have www folder. We instead have to use dist/app/browser and change it in capacitor.config.json

Both android and ios folders at the root of the project are created. These are entirely separate native project artifacts that should be considered part of your Ionic app (i.e., check them into source control, edit them in their own IDEs, etc.).

2. Copy your Web Assets

When you are ready to run your app natively on a device or in a simulator, copy your built web assets using:

npx cap sync

3. Open your Native IDE

Capacitor uses the Native IDEs to build, simulate, and run your app. To open one, run:

npx cap open

4. Update the native project

In some cases, the Capacitor app needs to be updated, such as when installing new plugins.

To install new plugins (including Cordova ones), run:

npm install really-cool-plugin
npx cap update

5. Updating Capacitor

To check if there are any new updates to Capacitor itself, run npx cap doctor to print out the current installed dependencies as well view the latest available.

To update Capacitor Core and CLI:

npm install @capacitor/cli@latest
npm install @capacitor/core@latest

To update any or all of the platforms you are using:

npm install @capacitor/ios@latest
npm install @capacitor/android@latest

See how to do this in the following video.

Ionic Capacitor vs Cordova

How to remove Capacitor and use Cordova?

We use and strongly recommend using Capacitor, the developer experience is SO MUCH better than it was with Cordova. However, in this section, we will show you how to remove Capacitor and add Cordova if you are not yet ready to use it.

  • Delete ios, android and .gradle folders

  • Delete capacitor.config.json

  • Run: ionic integrations disable capacitor

  • Run: ionic cordova platform add ios

  • Run: ionic cordova platform add android

Install Ionic Native by running:

npm install @ionic-native/core @ionic-native/status-bar @ionic-native/splash-screen --save

Go to app.component.tsand do the following:

Remove:

import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

Add:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Platform } from '@ionic/angular';

Change the initializeApp() method for the following code:

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

Add the following parameters to the constructor:

  constructor(..., 
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar)

Now go to app.module.ts and add the following:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

Then add them as providers of the module:

  providers: [
    StatusBar,
    SplashScreen,
    ...
  ],

Now if you run ionic serve everything should work fine.

We use Share and Geolocation plugins from Capacitor. If you want those features to work in your Cordova app, you need to change the implementation using the respective Ionic Native plugins.

Now you can safely remove the Capacitor dependencies from your package.json.

npm uninstall --save @capacitor/android
npm uninstall --save @capacitor/cli
npm uninstall --save @capacitor/core
npm uninstall --save @capacitor/ios

Ionic Capacitor Plugins

Web apps can access the full power of Native APIs with plugins. Plugins wrap common native operations that might use very different APIs across platforms while exposing a consistent, cross-platform API to JavaScript.

This app has an Android folder which contains the Android native app. Read how to .

Follow the steps from the .

This creates the www folder that Capacitor has been to use as the webDir in capacitor.config.json.

There are two main major points when doing a Cordova vs Capacitor comparison: Native Project Management and Plugin and CLI Management. In our we go through each of them to see the main changes and their benefits.

You will have to change the Capacitor plugins for plugins.

Find examples of how to to your project.

build this app for Android
Capacitor Workflow
automatically configured
Ionic Capacitor tutorial
Ionic Native
add Ionic Capacitor Plugins
recommend to use Capacitor
What is Ionic Capacitor
Develop and build your Web App
Sync your project
Run your project
Periodic Maintenance
build this app for iOS
Build your app for iOS with Capacitor
07-05-2021