Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
8 contributors

Users who have contributed to this file

@mlynch @bensperry @perrygovier @dotNetkow @ashinzekene @andreasbhansen @bryplano @coffeymatt
77 lines (49 sloc) 2.88 KB
title description url contributors
Installing Capacitor
Installing Capacitor
/docs/getting-started
dotnetkow
jcesarmobile

Installing Capacitor

There are two ways to start using Capacitor: adding Capacitor to an existing frontend project (recommended), or starting a fresh project. Capacitor was designed primarily to drop-in to existing frontend projects, but comes with a simple starting project structure if you'd like to start fresh.

Capacitor provides a native mobile runtime and API layer for web apps. It does not come with any specific set of UI controls which you will most likely need unless you're building a game or something similar.

We strongly recommend starting a Capacitor project with your mobile frontend framework of choice (such as Ionic).

Before you start

Make sure you have all the required Dependencies installed for the platforms you will be building for. Most importantly, make sure you update CocoaPods using pod repo update before starting a new project, if you plan on building for iOS using a Mac.

Adding Capacitor to an existing Ionic App

See here.

Adding Capacitor to an existing web app

Capacitor was designed to drop-in to any existing modern JS web app. A valid package.json file and a folder containing all web assets are required to get started.

To add Capacitor to your web app, run the following commands:

cd my-app
npm install --save @capacitor/core @capacitor/cli

Then, initialize Capacitor with your app information.

Note: npx is a new utility available in npm 5 or above that executes local binaries/scripts to avoid global installs.

npx cap init

This command will prompt you to enter the name of your app and the app id (the package name for Android and the bundle identifier for iOS). Use the --web-dir flag to set the web assets folder (the default is www).

Next, install any of the desired native platforms:

npx cap add android
npx cap add ios
npx cap add electron

🎉 Capacitor is now installed in your project. 🎉

Optional: Starting a fresh project

Capacitor comes with a stock project structure if you'd rather start fresh and plan to add a UI/frontend framework separately.

To create it, run:

npx @capacitor/cli create

This command will prompt you to enter the name of your app and the app id (the package name for Android and the bundle identifier for iOS).

This will create a very simple starting app with no UI library.

Where to go next

Make sure you have the Required Dependencies installed, including PWA Elements, then proceed to the Developer Workflow Guide to learn how Capacitor apps are built.

You can’t perform that action at this time.