⚙️Configuration

Different but important parts of boilerplate configurations / dependencies.

zaf.config.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.

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