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 🙂
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.
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.
1 thought on “Capacitor | How to create a simple App using Capacitor with or without Ionic”
Nice post! Thanks for sharing amazing content.