Join us for a Special Ionic Event. March 10th 2021.
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@next @capacitor/cli@next
Then, initialize Capacitor using the CLI questionnaire:
npx cap init
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
For example, in a React app, add the following import to
+import '@capacitor/core'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));