Scripts

Configuration

scale-ui-custom-scripts will automatically parse .env files and expose any variable starting with REACT_APP_ or NGUI_ to the custom project where you can access it via process.env.NGUI_SOME_CUSTOM_SETTING.

Environment files are loaded in this order where values with the same key are not overwritten if defined before:

• .env.local
• .env.[NODE_ENV] (e.g. .env.development or .env.production)
• .env

There are also some special environment settings that are not exposed to the custom project but let you configure the custom-scripts itself:

| Key | Default | Required | Description | | ------------------------ | ------- | -------- | ----------------------------------------------------------------------- | | SERVER_URL | | yes | The URL where NG UI is running, e.g. https://demo.centersightcloud.com/ | | LOCAL_UI_SERVER_PORT | 3001 | no | The port where the custom app is served on localhost | | LOCAL_CUSTOM_SERVER_PORT | 3002 | no | The port where the custom bundle is served on localhost | | AUTO_RELOAD | true | no | Automatically reload the browser window after compiling changes |

Auto Reload

If you make changes in your custom project, it is automatically re-compiled after saving.

All open browser windows will also automatically refresh. You can opt out of this by setting AUTO_RELOAD=false in your .env or .env.local file.

Locize Synchronization

To transfer translations from the NGUI Locize Project to the Custom Project Locize Project, the script locize-sync can be used.

This script downloads translation keys from the NGUI Locize Project and uploads them to the Custom Project Locize Project.

The script allows filtering of keys and values via a function that has to be provided. This filtering function must be provided, because normally the Custom project only needs a portion of the keys the NGUI project contains.

There is a parameter --upload-all which can be used to upload ALL NGUI translations to the custom project, but this should be used with caution.

Configuration

package.json

In the custom project, the following two entries need to be added to the scrips section:

"locize-sync": "scale-ui-custom locize-sync",
"locize-sync-dry-run": "scale-ui-custom locize-sync --dry-run",

Environment

The following variables need to be added to the .env file:

LOCIZE_SYNC_NGUI_PROJECT_ID=[Locize project_id of the NGUI project]
LOCIZE_SYNC_CUSTOM_PROJECT_ID=[Locize project_id of the custom project]
LOCIZE_SYNC_CUSTOM_PROJECT_VERSION=[version, usually latest]
LOCIZE_SYNC_CUSTOM_PROJECT_API_KEY=[project_api_key with write access]

The value for LOCIZE_SYNC_NGUI_PROJECT_ID is listed in the Scale UI documentation under "Getting started guide" > "Internationalization" > "Copying translations from the NGUI locize project".

You have to create a file .locizesyncfilterrc.js in the project root that default exports a filter function with this signature (key: string, value: string) => boolean. Both key and value are not null.

Example:

module.exports = function (key, value) {
	if (key.toLowerCase().includes('asset')) {
		return true;
	} else if (value.toLowerCase().includes('asset')) {
		return true;
	} else {
		return false;
	}
};

Usage

Either run

yarn locize-sync

to run the upload or run

yarn locize-sync-dry-run

to see only which keys would be uploaded, without running the upload.

Releasing

The git flow tools need to be installed, e.g. from https://github.com/petervanderdoes/gitflow-avh. Initialize the repo with git flow init and answer every question with the default; the release script verifies that the branches are named main and develop.

Run the release script from the repository root:

./release.sh

Before running it, make sure the workarea is clean and all commits on develop are pushed; otherwise the script aborts. It runs the vulnerability scan and the tests, releases the current version from package.json (without -SNAPSHOT) and afterwards starts the next minor snapshot version. The publish CI job then publishes the release tag to the public npm registry.