Ionic Capacitor and how to set up the capacitor in an ionic application

Capacitor Definition from the official site “The Native Bridge for Cross-Platform Web Apps”.

What is an ionic capacitor ?

Ionic Capacitor is an open-source framework innovation to help you build Progressive Native Web, Mobile, and Desktop apps. We can also use Cordova to achieve native functionality and but some of the Cordova plugins only work on mobile devices. The ionic team has created Capacitor plugins that can work on mobile, desktop, and browser to achieve progressive web applications.

How to set up ionic capacitor in an ionic application ?

Step 1: To Install the capacitor in an ionic project, the latest version of an Ionic will ask you whether you want to install it while creating an Ionic project. If not then use the following command to install it.

npm install --save @capacitor/core @capacitor/cli

Step 3: Install desired native platforms and add a Capacitor

$npx cap add android
$npx cap add ios
$npx cap add electron

If Running npx cap add platform (android or ios), show errors. The capacitor could not find the web assets directory “project name/www”. Please create it, and make sure it has an index.html file. You can change the path of this directory in capacitor.config.json.

We have to create a www folder by running the following build command

$ng build
$npx cap add android

Once a platform is added to our application. To run our application on native devices we need to open our application in IDE, for Android we have to open our application in Android studio.

$npx cap open android

Running this command may show you an error, in my case in Ubuntu it shows the error as Unable to launch Android Studio. You must configure “linuxAndroidStudioPath” in your capacitor.config.json to point to the location of the studio.sh, using JavaScript-escaped paths.

Example:
{
     “linuxAndroidStudioPath”: “/usr/local/android-studio/bin/studio.sh”
}

If you know the path of an Android studio.sh, then replace an Android studio path with yours. But in my case linuxStudio path is different and you can find an Android studio path in your Ubuntu by running this command.

locate studio.sh
/snap/android-studio/81/android-studio/bin/studio.sh/snap/android-studio/82/android-studio/bin/studio.sh

Once you got your Android studio path add the linuxAndroidStudioPath attribute in your capacitor.config.json

{
  "appId": "io.ionic.starter",
  "appName": "geolocation",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "cordova": {},
  "linuxAndroidStudioPath": "/snap/android-studio/82/android-studio/bin/studio.sh"
}

Once we open our application in Android studio. We run our application on our android mobile device by clicking on the run icon button on an Android studio.
When we modify our code in our application, then we can rerun the application.

$ionic capacitor run android

Step 4: Import plugin object from Capacitors module in our projects.

import { Plugins, Capacitor } from '@capacitor/core';

The plugins object bundles all the plugins available from Capacitors. For more information and a list of available capacitor plugins from its official documentation of the capacitor.

Difference between capacitor vs cordova

Cordova is open source and it was used extensively in Ionic versions 1 to 4 to create applications for the hybrid. The Cordova wraps your HTML/JavaScript app into a native container that can access the device functions of several platforms.

But Cordova has some limitations, this is the reason that the Ionic team has started the Capacitor project. We can think of Capacitor as the finner version of Cordova, it is an open-source project to allows developers to create Progressive web applications. Cordova wraps your HTML/JavaScript app into a native container that can access the device functions of several platforms.

Here we have the difference between Capacitor and Cordova.

Ionic capacitor tutorial

We had made a series of Ionic capacitor tutorials, here is what we covered, and will cover more in future tutorials.

• Ionic Capacitor camera example
• Ionic capacitor storage
• Ionic network detection with Capacitor
• Ionic Capacitor Geolocation for getting location Data
• Ionic Social sharing using capacitor and Cordova