What is Capacitor and How to Install It

Introduction

Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web standards as possible, while accessing rich native device features on platforms that support them. If it works in the browser, it probably works in a mobile app when using Capacitor. Adding native functionality is straightforward with a Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.

Get Started

Getting started with Capacitor is easy! Capacitor can be dropped into any existing modern JavaScript project, or a fresh Capacitor project can be created from scratch.

Installing Capacitor

You can create a new Capacitor application or add Capacitor to your existing web project. This can be done via CLI or using the VS Code extension.

Create a new Capacitor app​

The @capacitor/create-app package can be used to quickly create a Capacitor application. You can run the following command in an empty directory to scaffold a new Capacitor application.

npm init @capacitor/app

Add Capacitor to your web app​

Capacitor was designed to drop into any modern JavaScript web app. However, your project needs to have the following three requirements in order to use Capacitor with your existing application:

• A package.json file
• A separate directory for built web assets such as dist or www
• An index.html file at the root of your web assets directory

Install Capacitor​

In the root of your app, install Capacitor's main npm dependencies: the core JavaScript runtime and the command line interface (CLI).

npm i @capacitor/core
npm i -D @capacitor/cli

Initialize your Capacitor config​

Then, initialize Capacitor using the CLI questionnaire:

npx cap init

The CLI will ask you a few questions, starting with your app name, and the package ID you would like to use for your app. It will create the capacitor-config file with these configuration details, including the expected output directory for the build process of your bundler (e.g. www for Angular, build for React, public for Vue, etc.).

Create your Android and iOS projects​

After the Capacitor core runtime is installed, you can install the Android and iOS platforms.

npm i @capacitor/android @capacitor/ios

Once the platforms have been added to your package.json, you can run the following commands to create your Android and iOS projects for your native application.

npx cap add android
npx cap add ios

Sync your web code to your native project​

Once you've created your native projects, you can sync your web application to your native project by running the following command.

npx cap sync

npx cap sync will copy your built web bundle expected to be found in webDir of the Capacitor Config file to your native project and install the native project's dependencies.