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@next @capacitor/cli@nextThen, initialize Capacitor using the CLI questionnaire:
npx cap initThe
npx capcommand is how Capacitor is executed locally on the command-line in your project. Learn more about the Capacitor CLI.
Finally, add an import to
@capacitor/core to the TypeScript or JavaScript file that bootstraps your app. This will include the Capacitor JavaScript bridge into your app.
For example, in a React app, add the following import to
src/index.tsx:
+import '@capacitor/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
