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
• Assets processing
• Styles processing
• 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).
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

# 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

# In targets/<target_name> folder
hub-client dev
hub-client deploy stage
hub-client build production

Options

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:

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:

<<<: !include index.yml
serverUrl: 'https://production.onboardapp.io/api'
analytics:
  ga: '123456'
# More configuration keys for selected environment