---
description: Different but important parts of boilerplate configurations / dependencies.
---

# Configuration

## zaf.config.json

```json
{
  "location": Ticket Location, // See more in Support Apps Ticket Locations
  "server_side": boolean,
  "dev_url": string,
  "production_url": string,
  "dev_port": number,
  "size": {
    "height": 400
  }
}
```

### location

| Location enum         | Description                                                                                                      |
| --------------------- | ---------------------------------------------------------------------------------------------------------------- |
| ticket\_sidebar       | Applications displayed in a regular ticket view                                                                  |
| new\_ticket\_sidebar  | Displayed in the sidebar on the right side when in a view for creating new tickets                               |
| organization\_sidebar | Sidebar when viewing organisation profile                                                                        |
| user\_sidebar         | Sidebar when viewing user profile                                                                                |
| top\_bar              | Openable application next to call icon, top right bar                                                            |
| nav\_bar              | Navigation bar on the left, has the biggest layout possibilities                                                 |
| modal                 | Modal window                                                                                                     |
| ticket\_editor        | In the actual text editor, whenever you are writing a response (private or public). Useful for text editing apps |
| background            | Applications to run in the background, have no UI                                                                |

### server\_side

Controls whether boilerplate will interpretate the package as a server side application or bundled app.&#x20;

Set to `true` if your package is server side app.\
Set to `false` if your package is bundled app (client side)

### dev\_url

Inserted into `manifest.json` file in location object, to let Zendesk know what is the base URL for the iframe during local development time (when `yarn *:run` commands are executed).

In 99% of the cases, this should be `http://localhost` for local development .

### production\_url

Inserted into `manifest.json` file in location object, to let Zendesk know what is the base URL for the iframe during production build time (when `yarn build` command is run).

If your application is server side (`server_side` is set to `true`), this should be pointing to the URL of your deployed application.

If your application is bundled app (`server_side` is set to `false`), this should be pointing to the name of your main `.html` file, which is served as an entry point by Vite. You can have it named anything you want.

### dev\_port

Only used during local development, to set the port of the running Vite / whatever server side app you have next to the `dev_url`. Adjust this based on which port your application is running on.

### size.height

Controls the height of your application

### size.width

Controls the width of your application
