# Building App on device

There are two ways to start using Capacitor - adding Capacitor to an existing frontend project (recommended), or starting a fresh project. Since we have a front-end project ready in the form of Ionic React Capacitor Full App, we'll go with the first option.

#### Before you start

Make sure you have all the required dependencies installed for the platforms you will be building for, as per [Initial Setup](/ionic-5-react-capacitor-full-app/setup/initial-setup.md). 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.

## Attaching Capacitor to Ionic React Capacitor Full App

Go to your project root and attach Capacitor with the project using 

```
$ ionic integrations enable capacitor
```

You will also want to initialize your project with Capacitor. This sets the App name and App ID for the project. App Id becomes the package name in Android and bundle ID in iOS

```
$ npx cap init [appName] [appId]
```

where `appName` is the name of your app, and `appId` is the domain identifier of your app (ex: `com.example.app`).

After this command, your settings will be saved in `capacitor.config.json` 

{% hint style="info" %}
Once the App Name and AppId are set, these can be changed through Native IDEs i.e. Android Studio and Xcode
{% endhint %}

### Build your Ionic App

You must build your Ionic project at least once before adding any native platforms.

```
$ ionic build
```

This creates the `www` folder that Capacitor has been [automatically configured](https://capacitor.ionicframework.com/docs/basics/configuring-your-app) to use as the `webDir` in `capacitor.config.json`. Sometimes, this folder is named `build` instead of `www` . In such case, go to `capacitor.config.json` and change your `webDir` to `build` 

### Add Platforms

```
// Add iOS platform
$ npx cap add ios

// Add android platform
$ npx cap add android
```

Both `android` and `ios` folders at the root of the project are created. These are entirely separate native project artifacts that should be considered part of your Ionic app (i.e., check them into source control, edit them in their own IDEs, etc.).

### Open IDE to build, run, and deploy

```
$ npx cap open ios
$ npx cap open android
```

The native iOS and Android projects are opened in their standard IDEs (Xcode and Android Studio, respectively). Use the IDEs to run and deploy your app.

### Syncing your app with Capacitor

Every time you perform a build (e.g. `ionic build`) that changes your web directory (default: `www`or `build`), you'll need to copy those changes down to your native projects using

```
$ npx cap copy
```

If you have installed a new plugin or package, you'll have to run this command to copy everything in the platforms (no need to run `npx cap copy` in this case)

```
$ npx cap sync
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enappd.gitbook.io/ionic-5-react-capacitor-full-app/setup/building-app-on-device.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.