> ## Documentation Index
> Fetch the complete documentation index at: https://platform.docs.zenoo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Target Compilation

> Target compilation

## Target compilation

For target compilation HUB Client contains CLI tool, which uses Target Builder module internally.

The Target Builder is a tool to process Target files and combine the files with the contents of compiled `@zenoo/hub-client-core` into releaseable package.

Target Builder uses the `index.yml` file as entry point, then combines and compiles all files that are included inside this file and also process files in `assets` folder. These files are supported: YAML, JSON, HTML, MD, LESS, and CSS.

* [CLI commands](#cli-commands)
* [Assets processing](#assets-processing)
* [Styles processing](#styles-processing)
* [Environment-specific entry points](#environment-specific-entry-points)

Target Builder passes these steps:

1. Process assets folders and put it to output folder.
2. Process the entry point YAML file, and recursively process all includes (for more details, see [!include](/technical-specification/hub-client/yml-configuration#include-compile-time-tag)).
3. Process/compile all other files (such as less, md, etc.).
4. Combine all output into one large `configuration.json` file and one `styles.css` file and place into the output folder.

### CLI commands

```bash theme={null}
# Run from specific target directory
hub-client <command> [<environment>] [-p <port>]
```

##### `<command>`

Command to run over specified target: `build`, `dev` or `deploy`

##### `<environment>`

Environment name on the basis of which target entry point will be taken

```
${target}/src/index.${environment}.yml
```

##### Examples

```bash theme={null}
# In targets/<target_name> folder
hub-client dev
hub-client deploy stage
hub-client build production
```

### Options

|     Parameter    |         Explanation         |  Type  | Default |
| :--------------: | :-------------------------: | :----: | :-----: |
|  `--port`, `-p`  | Port for webpack dev server | number |   8888  |
| `--branch`, `-b` |       Branch to deploy      | string |  master |

### Assets processing

While building a target, two folders of assets are being processed:

* `<target>/src/assets`
* `@zenoo/hub-client-common/lib/assets`.

Target Builder collects all of the content in these two folders, adds a random hash postfix to the filenames (to prevent caching issues), and places it into the `/assets` output folder. All references to assets will be replaced with new hashed names, both in YML and LESS/CSS files.

In case of collisions between `<target>/src/assets` and `@zenoo/hub-client-common/lib/assets`, the file from `<target>/src/assets` will have a higher priority. Use this prioritization to replace some "default asset" with an asset specific only for this target.

#### IMPORTANT

The format to reference an asset should be: `/assets/some_file.ext`.

Other reference formats such as `./../assets/some_file.ext` will not be resolved properly.

### Styles processing

In root of each YAML which is included in any depth of target scruture you can define `styles` field which can contain array of CSS or LESS files to include it into target build.

In finally steps of target build is all styles filtered by unique, that means you can import one style file in multiple components as many times you want, and on output `styles.css` will be each file only once.

**Example**:

```yaml theme={null}
styles:
  - !include ./style.less
  - !include ./other-style.css
```

### Environment-specific entry points

To build a target with an environment-specific configuration in Target Builder, you can specify a different entrypoint by creating a different `index.yml` file.

The format of this environment-specific `index.yml` file must be as follows:

**`<target>/index.{ENVIRONMENT}.yml`**

**Example:** `<target>/index.production.yml`

Within this file, simply include the main `index.yml` entry file:

```yaml theme={null}
<<<: !include index.yml
serverUrl: 'https://production.onboardapp.io/api'
analytics:
  ga: '123456'
# More configuration keys for selected environment
```