We are heading a term Capacitor with Cordova for a long time. But what is a Capacitor? How to use it? Is it a substitute for Cordova? Can we use it with Cordova? there are many Questions which we will try to answer in the best possible way!

So finally we are in a state to talk about Capacitor as a few days back a stable version 1.0.0 is released.

What is a Capacitor?

The Capacitor is a Native layer for Cross-platform Web Application development, which makes it possible to use hardware features like Geolocation, Camera, Vibrations, Network, Storage, Filesystem and many more. The catch is there no need to install any plugin to use such Native feature like we used to do by installing Cordova Plugin.

The best thing is, it works on One Code Multiple Platform concept. We simply create an application with a single codebase which will work on Android, IOS, Progressive Web Apps, Web Browsers and Electron with all features and functionalities behaving in the same manner for each platform.

Who maintains the Capacitor?

The capacitor is an Open source project backed by Ionic Teams. But this doesn’t mean that you need Ionic Framework to use Capacitor, we can use Capacitor with any application having any UI Framework or even if it doesn’t have any 🙂

Dependencies

To use the Capacitor, there are few dependencies which need to be fulfilled

The base requirements are Node v8.6.0 or later, and NPM version 5.6.0 or late

Android Development: Java 8 JDK should be installed as currently, 9 is not supported.

Android studio is also recommended by the team.

IOS Development: Capacitor requires a Mac with Xcode 10 or above

You can check in more details here.

How to use Capacitor?

Capacitor can be installed on a fresh application as well as on existing applications.

Existing Application

Capacitor can be easily installed in any existing modern JS application by running following command on the app root folder

$ cd my-app
$ npm install --save @capacitor/core @capacitor/cli

Then we need to add app information

$ npx cap init

Note: npx is used to execute local binaries, available after npm 5 or above

After that run init command to enter App name and App ID for Android and IOS

$ npx cap init

? App name FreakyJolly
? App Package ID (in Java package format, no dashes) com.freaky.demo

Next, you can add any required platform to application

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

That’s it now you have Capacitor installed on your existing app 🙂

Start a new Project with Capacitor

If you want to create a simple project, then just run following npx command. You can add UI framework later

$ npx @capacitor/cli create

? App name NewCapacitorApp
? App Package ID (in Java package format, no dashes) com.fj.capacitorapp
? Directory for new app NewCapacitorApp

After that, you will be prompt for App name and ID. You are ready to go with a simple Capacitor based app with no UI installed.

Using Capacitor with Ionic

Yup! How can we forget our Ionic framework 😛 it’s very easy to Create a new Ionic app with Capacitor and adding it to an existing application.

New Ionic Project

To create a new Ionic project with Capacitor, simply add –capacitor option flag

$ ionic start myApp tabs --capacitor
$ cd myApp

Existing Ionic Project

Run the following command with App Name and Application ID

npx cap init [appName] [appId]

After that need to run

$ ionic build

Then add platform by running

$ npx cap add ios
$ npx cap add android

That’s it you can read more details here In coming posts we will discuss more Capacitor applications with Native features.