> For the complete documentation index, see [llms.txt](https://pineapps.gitbook.io/zendesk-applications-framework-boilerplate/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pineapps.gitbook.io/zendesk-applications-framework-boilerplate/about.md).

# 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](/zendesk-applications-framework-boilerplate/get-started.md) 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.