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 natively functionality and but some of the Cordova plugins only works in mobile devices. The ionic team has created Capacitor plugins that can work on mobile, desktop, and browser to achieve progressive web application.

How to set up ionic capacitor in an ionic application ?

Step 1: Install the capacitor
npm install –save @capacitor/core @capacitor/cli
Step 2: Adding a name of our application
Note: The npx is a new utility available in npm 5 or above it will executes local binaries/scripts to avoid global installs.
>> npx cap init
This command will prompt you to enter the name of your app and the app id (the package name for Android and the bundle identifier for iOS).

Step 3: Install desired native platforms and adding 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 in native devices we need to open our application in IDE, for an 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 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 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 an Android studio path add 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 in 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 that bundles all the plugins available from Capacitors.

For more information and a list of available capacitor plugins from its official documentation of the capacitor.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top