Capacitor | How to create a simple App using Capacitor with or without Ionic

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

Then we need to add app information

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

Next, you can add any required platform to application

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

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

Existing Ionic Project

Run the following command with App Name and Application ID

After that need to run

Then add platform by running

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

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Miley Cryus Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Miley Cryus
Guest
Miley Cryus

Nice post! Thanks for sharing amazing content.