Skip to content
View lessons Login
3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Getting Started with Capacitor

Getting Started with Capacitor

This lesson is going to focus on the basics of getting set up with Capacitor, which will include:

  • Installation
  • Adding native platforms
  • Syncing your web code with the native application
  • Running native builds

Installing Capacitor

If you’re using Ionic, then your project likely already has Capacitor installed - it’s installed by default when you generate a new Ionic application. However if you are not using Ionic, as long as your application has:

  • A package.json file
  • A directory where your built web application is output (e.g. a dist, or public, or www folder)
  • An index.html file at the root of your built output

Then you can use Capacitor. The general idea here is that we need to be able to install Capacitor, and Capacitor needs to know where to find the built web output that it can copy into the native applications web view.

To install Capacitor, you will need to run the following commands:

npm i @capacitor/core
npm i -D @capacitor/cli

After installing these packages, you can configure Capacitor for your project by running:

npx cap init

If you are using Ionic, and for some reason your Ionic application does not already have Capacitor installed, you can easily install and configure it by running:

ionic integrations enable capacitor

Adding Native Platforms

By default, no native platforms will be added by Capacitor (i.e. no native iOS/Android application will be created within your project). To do this (if you are not using Ionic) you will first need to add the package for the native platform you want to target (or both of them):

STANDARD STANDARD

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).