ℹ️About

Few words about how it works and some of its internals

The project is structured and implemented in a way, that automates the majority of boring things away and lets you focus on writing your application logic.

Folder structure

.
├── LICENSE
├── README.md
├── package.json
├── packages/
│   ├── my-main-app/
│   │   ├── README.md
│   │   ├── ...
│   │   └── zaf.config.json
│   ├── non-server-app/
│   │   ├── README.md
│   │   ├── ...
│   │   └── zaf.config.json
│   └── zendesk
│       ├── assets/    # <- Include your marketing materials here (logo etc)
│       ├── manifest.json
│       ├── package.json
│       ├── scripts/
│       │   ├── build.mjs
│       │   ├── config.mjs
│       │   └── manifest.mjs
│       ├── sdk/
│       ├── translations/    # <- Include your translations
│       │   └── en.json
│       ├── tsconfig.json
│       └── vite-plugin-inject-zaf-html
│           └── index.js
├── scripts
│   ├── build.mjs
│   ├── run.mjs
│   └── util.mjs
└── yarn.lock

Ok, quite few pieces of this, but you will only need to know about few, don't worry. Some small folders are annotated directly in the giagram, but let's cover others that might need a bit more attention.

Directory - packages/

Package	Safe to remove	Purpose
zendesk	❌	This is where you would store your static assets (file translations, logo etc.) This is also a place of some building and manifest updating logic.
my-main-app	✅	A demo application showcasing usage of NextJS as a server-side app
non-server-app	✅	A demo application showcasing a way to bundle an application (in this case - it's React app) for uploading it to Zendesk's servers - opposite of server-side apps

Directory - scripts/

• run.mjs - a small wrapper script handles running boilerplate

• build.mjs - script handling building different packages in your /packages/* dir

• util.mjs - set of utilities required to run run.mjs and build.mjs

In a normal sunny day, you wouldn't need to bother with those files. Those files there are to serve your comfort, run commands and build projects from the root directory.

Directory - packages/zendesk/vite-plugin-inject-zaf-html/

This is a small custom Vite plugin. Its sole purpose is to include a script tag inside your index.html project (more on this in Get started page).

File - packages/zendesk/manifest.json

This is quite important file to remember to update, as it contains crucial information about the application you are building.

However, you don't want to update location property of this manifest file, as this is controlled entirely by build scripts, in order to allow you localhost development with live reload and correct bundling. You are free to modify here everything else apart from location. Do not worry, you can however control other properties inside location with help of other tools.

File - packages/**/zaf.config.json

This is one of the main files that is being used by boilerplate to control the behaviour during local development and build times.

zaf.config.json contains configuration information for each application project.

if you wish a package in directory packages/ to become an application, you should include zaf.config.json in the directory of this package. You can observe from the starting point, that both my-main-app and non-server-app contain this file.