# App Setup

## Installing Capacitor

There are two ways to create your Capacitor application. You can use the `@capacitor/create-app` package to create a Capacitor application from scratch, or you can add Capacitor to your already existing web project.

Remember to make sure your [environment is set up](https://capacitorjs.com/docs/getting-started/environment-setup) for the platforms you will be building for.

### Creating a new Capacitor application[​](https://capacitorjs.com/docs/getting-started#creating-a-new-capacitor-application) <a href="#creating-a-new-capacitor-application" id="creating-a-new-capacitor-application"></a>

The `@capacitor/create-app` package can be used to quickly create a Capacitor application. You can run the following command in an empty directory to scaffold a new Capacitor application.

```
npm init @capacitor/app
```

Copy

### Adding Capacitor to your existing web application[​](https://capacitorjs.com/docs/getting-started#adding-capacitor-to-your-existing-web-application) <a href="#adding-capacitor-to-your-existing-web-application" id="adding-capacitor-to-your-existing-web-application"></a>

Capacitor was designed to drop into any modern JavaScript web app. However, your project needs to have the following three requirements in order to use Capacitor with your existing application.

Your project must have...

* A `package.json` file
* A separate directory for built web assets such as `dist` or `www`
* An `index.html` file at the root of your web assets directory

**Info**

Your `index.html` file must have a `<head>` tag in order to properly inject Capacitor. If you do not have a `<head>` in your Html, Capacitor plugins will not work.

#### Install Capacitor[​](https://capacitorjs.com/docs/getting-started#install-capacitor) <a href="#install-capacitor" id="install-capacitor"></a>

In the root of your app, install Capacitor's main npm depdencies: the core JavaScript runtime and the command line interface (CLI).

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

Copy

#### Initialize your Capacitor config[​](https://capacitorjs.com/docs/getting-started#initialize-your-capacitor-config) <a href="#initialize-your-capacitor-config" id="initialize-your-capacitor-config"></a>

Then, initialize Capacitor using the CLI questionnaire:

```
npx cap init
```

Copy

The CLI will ask you a few questions, starting with your app name, and the package ID you would like to use for your app.

#### Create your Android and iOS projects[​](https://capacitorjs.com/docs/getting-started#create-your-android-and-ios-projects) <a href="#create-your-android-and-ios-projects" id="create-your-android-and-ios-projects"></a>

After the Capacitor core runtime is installed, you can install the Android and iOS platforms.

```
npm i @capacitor/android @capacitor/ios
```

Copy

Once the platforms have been added to your `package.json`, you can run the following commands to create your Android and iOS projects for your native application.

```
npx cap add android
npx cap add ios
```

Copy

#### Sync your web code to your native project[​](https://capacitorjs.com/docs/getting-started#sync-your-web-code-to-your-native-project) <a href="#sync-your-web-code-to-your-native-project" id="sync-your-web-code-to-your-native-project"></a>

Once you've created your native projects, you can sync your web application to your native project by running the following command.

```
npx cap sync
```

Copy

`npx cap sync` will copy your built web application, by default `www`, to your native project and install the native projects dependencies.


---

# 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://chndth.gitbook.io/ionic-taxi-app-setup-doc/initial-version/android-setup.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.
