This guide will help you install Capacitor into an existing frontend web app.
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.
- Must have a
- 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.
npx capcommand is how Capacitor is executed locally on the command-line in your project. Learn more about the Capacitor CLI.