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).
Make sure your environment is set up for the platforms you will be building for.
index.htmlfile with a
<head>tag in the root of the web assets directory.
In the root of your app, install Capacitor:
npm install @capacitor/core @capacitor/cli
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.
Last, it will ask what directory your web assets get built into. For Angular, this is
www, React is
build, and Vue is
dist. If you don’t know right now, you can update this value in the
capacitor.config.ts file later.
npx capcommand is how Capacitor is executed locally on the command-line in your project. Learn more about the Capacitor CLI.