Installing Capacitor
This guide will help you install Capacitor into an existing frontend web app.
If starting a new app, we recommend using the documentation from your JavaScript framework of choice and then following this guide to integrate Capacitor.
You can also create a new basic app with
npm init @capacitor/app.
Capacitor provides a native mobile runtime and API layer for web apps. It does not come with any specific set of UI controls. We recommend you use a mobile component framework (such as Ionic Framework).
Before you start
Make sure your environment is set up for the platforms you will be building for.
Project Requirements
Capacitor was designed to drop into any modern JavaScript web app. Projects must meet the following requirements:
- Must have a
package.jsonfile. - Must have a separate directory for web assets.
- Must have an
index.htmlfile with a<head>tag in the root of the web assets directory.
Adding Capacitor to your app
In the root of your app, install Capacitor:
npm install @capacitor/core
npm install @capacitor/cli --save-dev
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.
The
npx capcommand is how Capacitor is executed locally on the command-line in your project. Learn more about the Capacitor CLI.