No history yet

Capacitor Setup

Setting Up Capacitor

Capacitor takes your existing web application and wraps it in a native mobile shell. This means you can use your familiar web technologies—HTML, CSS, and JavaScript—to build apps for iOS and Android. The first step is getting Capacitor installed and integrated into your project.

Installation

Before you begin, make sure you have a recent version of Node.js installed, as Capacitor uses npm (Node Package Manager). The core of Capacitor is its command-line interface (CLI), which you'll use to initialize your project and manage native platforms.

It's a good practice to install the Capacitor CLI locally in each project rather than globally. This ensures that everyone working on the project uses the same version of the tools, avoiding potential compatibility issues.

Navigate to your web project's root directory in your terminal. Then, install the necessary Capacitor packages.

npm install @capacitor/core
npm install @capacitor/cli --save-dev

The @capacitor/core package contains the main Capacitor runtime and APIs you'll use in your web code. The @capacitor/cli is the development tool for managing your native projects.

Initializing Capacitor

With the packages installed, you can now initialize Capacitor in your project. This command will ask you a few questions about your app, such as its name and a unique package ID. The package ID typically follows a reverse domain name convention, like com.company.appname.

npx cap init

Running this command creates a capacitor.config.json file in your project's root. This file is central to your Capacitor setup. It tells Capacitor where to find your compiled web assets.

Your web project must have a build step that outputs the final HTML, CSS, and JavaScript files into a single directory, often named build, dist, or www.

You need to edit capacitor.config.json and set the webDir property to point to this output directory. For a Create React App project, this is typically build.

{
  "appId": "com.mycompany.myapp",
  "appName": "My Awesome App",
  "webDir": "build",
  "bundledWebRuntime": false
}

Adding Native Platforms

Now you're ready to add the native mobile platforms. These commands will create android and ios folders in your project root. These are complete, standalone native projects that you can open in Android Studio and Xcode, respectively.

First, install the specific platform packages for iOS and Android.

npm install @capacitor/ios @capacitor/android

Next, add the native platforms to your project. This command reads your capacitor.config.json and sets up the native project files.

npx cap add ios
npx cap add android

For iOS development, you'll need a Mac with Xcode installed. For Android, you'll need Android Studio. Once these platforms are added, you have a complete bridge between your web app and the native mobile environments.

Your project is now configured. The next step is to sync your web code with the native platforms and run your app on a device or emulator.