Crestron HTML5 User Interface

https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/
Admin
Crestron HTML5 User Interface (CH5) is a framework for developing web-based user interfaces for...
Tokens:105,485
Snippets:972
Trust Score:10
Update:10 months ago
Show doc for...
Tokens:
Raw
### Webpack Script Examples in package.json

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Framework/Webpack

This snippet shows npm scripts for running Webpack in development and production modes. The 'start' script uses webpack.dev.js for development, while 'build:prod' uses webpack.prod.js for production builds. These scripts leverage Webpack's configuration to manage the build process.

```json
"scripts": {
    "start": "npm run clean:start && webpack --config webpack.dev.js",
    "build:prod": "npm run clean:prod && webpack --config webpack.prod.js && npm run cleanjs:prod"
}
```

--------------------------------

### OpenSSL Command Prompt Output

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Create-Certs

This output displays the version and build information of the OpenSSL installation. It confirms the environment and loaded options, which are useful for verifying the OpenSSL setup before proceeding with certificate generation.

```text
OpenSSL 1.1.1i  8 Dec 2020  
built on: Tue Dec  8 20:54:45 2020 UTC  
platform: VC-WIN64A  
options:  bn(64,64) rc4(16x,int) des(long) idea(int) blowfish(ptr)  
compiler: cl /Z7 /Fdossl_static.pdb /Gs0 /GF /Gy /MD /W3 /wd4090 /nologo /O2  
-DL_ENDIAN -DOPENSSL_PIC -DOPENSSL_CPUID_OBJ -DOPENSSL_IA32_SSE2 -DOPENSSL_BN_ASM_MONT  
-DOPENSSL_BN_ASM_MONT5 -DOPENSSL_BN_ASM_GF2m -DSHA1_ASM -DSHA256_ASM -DSHA512_ASM  
-DKECCAK1600_ASM -DRC4_ASM -DMD5_ASM -DAESNI_ASM -DVPAES_ASM -DGHASH_ASM -DECP_NISTZ256_ASM  
-DX25519_ASM -DPOLY1305_ASM -D_USING_V110_SDK71_ -D_WINSOCK_DEPRECATED_NO_WARNINGS  
-D_WIN32_WINNT=0x0502  
OPENSSLDIR: "C:\\Program Files\\Common Files\\SSL"  
ENGINESDIR: "C:\\Program Files\\OpenSSL\\lib\\engines-1_1"  
Seeding source: os-specific
```

--------------------------------

### Emulation Utility Configuration Object Example (JSON)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Testing-Debugging/Control-System-Emulator

An example of an empty configuration object for the CH5 Control System emulation utility. This JSON defines the structure for cues and onStart events, which control how the emulator interacts with the CH5 project.

```json
{
  "cues": [
  ],
  "onStart": [
  ]
}
```

--------------------------------

### Install Project Dependencies

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Template-Project/Download-Setup

Installs the necessary libraries and dependencies for the Crestron project into the './node_modules' directory. This command is typically run after project creation.

```bash
npm install
```

--------------------------------

### Verify Docker Installation Command

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Testing-Debugging/Remote-Logger

This command verifies if Docker has been successfully installed on your workstation by checking its version. No specific inputs are required, and the output is the Docker version and build information.

```bash
docker --version
```

--------------------------------

### Get Help for Import All (NPM Script)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Import-All

Displays help information and available options for the 'import:all' NPM script. Executed by appending '-- --help' to the standard import command.

```bash
npm run import:all -- --help
```

--------------------------------

### Sass File Structure and Import Example

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Best-Practices/BP-SASS

Demonstrates a recommended SASS file structure using partials for better organization and maintainability. It shows how to import these partials into a master `global.scss` file for compilation.

```scss
/* VENDOR - Default fall-backs and external files.  
========================================================================== */  
  
@import 'vendor/_normalize.scss';  
  
/* BASE - Base Variable file along with starting point Mixins and Placeholders.  
========================================================================== */  
  
@import 'base/_variables.scss';  
@import 'base/_mixins.scss';  
@import 'base/_placeholders.scss';  
  
/* FRAMEWORK - Structure and layout files.  
========================================================================== */  
  
@import 'framework/_grid.scss';  
@import 'framework/_breakpoints.scss';  
@import 'framework/_layout.scss';  
  
/* MODULES - Re-usable site elements.  
========================================================================== */  
  
@import 'modules/_buttons.scss';  
@import 'modules/_lists.scss';  
@import 'modules/_tabs.scss';
```

--------------------------------

### Create demoCA Environment Directories and Files

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Create-Certs

Initializes a demo Certificate Authority (CA) environment by creating necessary subdirectories and files like index.txt and serial. This setup is required by OpenSSL for certificate management operations.

```bash
mkdir demoCA
mkdir demoCA\private
mkdir demoCA\newcerts
type nul > demoCA\index.txt
echo 01 > demoCA\serial
```

--------------------------------

### Create Crestron Project with Default Configuration

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Template-Project/Download-Setup

Creates a new Crestron template project using the default project configuration. This command requires the CH5 development tools to be installed and specifies the desired project name.

```bash
ch5-shell-cli create:project --projectName "[projectname]"
```

--------------------------------

### Install Crestron CH5 WebXPanel Library

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/X-Custom

Installs the HTML5 Web XPanel library from NPM. This is a prerequisite for using the library in your project.

```bash
npm install @crestron/ch5-webxpanel

```

--------------------------------

### Get Help for Library Import Command

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Import-Library

This command displays help information and available options for the 'import:library' NPM script. It is useful for understanding all possible arguments and configurations.

```bash
npm run import:library -- --help
```

--------------------------------

### CSS Transitions for Visual Effects

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Best-Practices/BP-HTML5

Demonstrates using CSS transitions for visual effects, an alternative to JavaScript for animations and state changes. This example shows transitions for element positioning.

```css
div.box {
	left: 40px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
div.box.totheleft {
	left: 0px;
}
div.box.totheright {
	left: 80px;
}
```

--------------------------------

### Create Crestron Project with Custom Configuration

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Template-Project/Download-Setup

Creates a new Crestron template project using a custom project configuration JSON file. This method allows for more granular control over project setup based on the specified configuration file.

```bash
ch5-shell-cli create:project --config [./directory/sample-config.json]
```

--------------------------------

### CH5 CLI Deploy Error Example (Bash)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Slow-Mode

This example shows the typical error message encountered when CH5 CLI fails to upload and deploy a project due to connection issues. It indicates a 'Permission denied' error during the file upload process.

```bash
C:\project-directory >ch5-cli deploy -H 1.1.1.1 -t touchscreen dist/prod/project_name.ch5z
Connected to device. Uploading archive file.
Trying to upload file to display/project_name.ch5z.
Closing sftp connection.
Error: Error on connection to 1.1.1.1: put: Permission denied display/project_name.ch5z. No success executing command.
```

--------------------------------

### Deploy Crestron HTML5 Archive with ch5-cli

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/UI-CH5-Archives

This example demonstrates deploying a Crestron HTML5 (.ch5z) archive file using the ch5-cli command-line interface. It specifies the archive file, target IP address, project type, and prompts for credentials.

```bash
ch5-cli deploy -p -H 1.1.1.1 -t touchscreen dist/prod/my_project.ch5z
```

--------------------------------

### Ping Hostname for IP Address

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Create-Certs

This example demonstrates how to use the 'ping' command in the OpenSSL console to resolve the IP address associated with the control system's fully qualified hostname. This IP address is needed as a subject alternate name for the CSR.

```text
C:\\users\\yourName\\Documents\\caSignedCertsWorkarea>ping RS-CP3.router.home  
  
Pinging RS-CP3.fios-router.home [192.168.1.244] with 32 bytes of data:  
Reply from 192.168.1.255: bytes=32 time<1ms TTL=128  
Reply from 192.168.1.255: bytes=32 time<1ms TTL=128  
Reply from 192.168.1.255: bytes=32 time=1ms TTL=128  
Reply from 192.168.1.255: bytes=32 time=1ms TTL=128  
  
Ping statistics for 192.168.1.255:  
    Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),  
Approximate round trip times in milli-seconds:  
    Minimum = 0ms, Maximum = 1ms, Average = 0ms  
```

--------------------------------

### Run One-Step Deployment for CH5 Project

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Deploy-Project

This command executes the production build, archiving, and deployment of a CH5 project sequentially. It's a streamlined process for deploying your project with a single command. Any failure in the individual steps will result in an error.

```bash
npm run build:onestep
```

--------------------------------

### CH5 CLI Deploy Success with Slow Mode (Bash)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Slow-Mode

This example illustrates a successful deployment of a Crestron HTML5 UI project using the CH5 CLI with slow mode enabled. It shows the connection process, file upload, and the device's confirmation of installation and restart.

```bash
C:\project-directory >ch5-cli deploy -H 1.1.1.1 -t touchscreen dist/prod/project_name.ch5z --slow-mode
Connected via ssh to device
Device output:

Device output:

TSW-1070>
Connection closed.
Connection has ended. Success executing command.
Connected to device. Uploading archive file.
Trying to upload file to display/xpanel_test.ch5z.
Uploaded file.
Closing sftp connection.
Sending reload command to touchscreen device:projectload
Connected via ssh to device
Device output:

Device output: Installing User Project, Please wait...

Device output: Success. Restarting UI...

Device output:

Device output:
TSW-1070>
Connection closed.
Connection has ended. Success executing command.
```

--------------------------------

### Install CH5 Utilities CLI (macOS)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/UI-CH5-Archives

Installs the necessary Crestron utilities CLI for CH5 project archiving and deployment on a macOS operating system. Requires Node.js and NPM to be installed first. Uses sudo for global installation.

```bash
sudo npm install -g @crestron/ch5-utilities-cli  

sudo npm install -g @crestron/ch5-shell-utilities-cli
```

--------------------------------

### Start Development Server for CH5 Project

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Deploy-Project

Compiles and launches a local web server to host the CH5 project, making it accessible in the default desktop web browser. It automatically recompiles and refreshes the browser upon detecting changes in source code. Preferred browsers are Chrome or Safari.

```bash
npm run start
```

--------------------------------

### Install CH5 Utilities CLI on Windows

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/QS-Installation

Installs the Crestron CH5 utilities CLI globally on a Windows operating system using npm. This command-line tool is essential for managing CH5 projects.

```shell
npm install -g @crestron/ch5-utilities-cli

npm install -g @crestron/ch5-shell-utilities-cli
```

--------------------------------

### Install CH5 Utilities CLI (Windows)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/UI-CH5-Archives

Installs the necessary Crestron utilities CLI for CH5 project archiving and deployment on a Windows operating system. Requires Node.js and NPM to be installed first.

```bash
npm install -g @crestron/ch5-utilities-cli  

npm install -g @crestron/ch5-shell-utilities-cli
```

--------------------------------

### Initialize WebXPanel with Configuration (Simple JavaScript)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/X-Custom

Initializes the WebXPanel library with essential configuration parameters like host, IP ID, and room ID using a simpler JavaScript approach. This snippet is suitable for projects not using a framework like Angular.

```javascript
const { WebXPanel, isActive } = getWebXPanel(!runsInContainerApp());
const configuration = {
    host: 'ip_address | hostname', // defaults to window.location.host
    ipId: '3|0x03', // string representing a hex value. Might contain "0x" or not. Defaults to "0x03"
    roomId: 'virtual_control_room_id', // defaults to empty string
};

if (isActive){
    WebXPanel.default.initialize(configuration);
}

```

--------------------------------

### Install CH5 Utilities CLI on macOS

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/QS-Installation

Installs the Crestron CH5 utilities CLI globally on a macOS operating system using npm with sudo privileges. This command-line tool is essential for managing CH5 projects.

```shell
sudo npm install -g @crestron/ch5-utilities-cli

sudo npm install -g @crestron/ch5-shell-utilities-cli
```

--------------------------------

### CH5 Button Component Example

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Template-Project/Tasks/Add-Contract

An example of a CH5 button component, illustrating its usage within a Crestron project. This component can be configured with various attributes like 'shape', 'label', and 'sendEventOnClick' to trigger specific actions.

```html
<ch5-button class=\"lighting-button\" shape=\"rectangle\" label=\"On\" sendEventOnClick=\"Component1.turnOn\"></ch5-button>
```

--------------------------------

### Initialize Joins on Startup in CH5 Emulator

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Testing-Debugging/Control-System-Emulator

This JSON configuration defines the initial states for multiple joins when the emulator starts. It sets a boolean join (11) to true, a numeric join (20) to 65535, and a string join (13) to a specific text value.

```json
{
  "cues": [
  ],
  "onStart": [
    {"type": "b", "state": "11", "value": true},
    {"type": "n", "state": "20", "value": 65535},
    {"type": "s", "state": "13", "value": "Cookies in the Break Room"}
  ]
}
```

--------------------------------

### Run Application in Staging Environment

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Framework/Create-Webpack

This command executes the staging build process defined in the package.json file. It first cleans the staging distribution directory and then runs the webpack build using the staging configuration.

```bash
npm run staging
```

--------------------------------

### Initialize WebXPanel with Configuration (TypeScript - Angular)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/X-Custom

Initializes the WebXPanel library with custom configuration parameters such as host, IP ID, and room ID. This example demonstrates usage within an Angular application's module configuration, ensuring WebXPanel is initialized early.

```typescript
import { getWebXPanel, runsInContainerApp } from '@crestron/ch5-webxpanel';
const { WebXPanel, isActive, WebXPanelConfigParams } = getWebXPanel(!runsInContainerApp());

const configuration: Partial<WebXPanelConfigParams> = {
    host: 'ip_address | hostname', // defaults to window.location.host
    ipId: '3|0x03', // string representing a hex value. Might contain "0x" or not. Defaults to "0x03"
    roomId: 'virtual_control_room_id', // defaults to empty string
};
// other rarely used options
//     port: 49200, // port for Secure WebSocket connection. Defaults to 49200
//     tokenUrl: 'https://url/cws/websocket/getWebSocketToken', // defaults to `${location.origin}/cws/websocket/getWebSocketToken`,
//     tokenSource: 'CSSelf|Fusion', // defaults to CSSelf


const webXPanelFactory = () => () => {
    if (isActive) {
      WebXPanel.initialize(configuration);
    }
}

// ...

@NgModule({
  // ...
  providers: [
    { provide: APP_INITIALIZER, useFactory: webXPanelFactory, multi: true },
    // ...
  ],
  // ...
})

// ...

```

--------------------------------

### Example Certificate Content

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/Create-Certs

A sample X.509 certificate in PEM format. This is a public key certificate used for establishing secure connections, often seen in SSL/TLS implementations.

```pem
-----BEGIN CERTIFICATE-----
MIIDjzCCAnegAwIBAgIBATANBgkqhkiG9w0BAQsFADAXMRUwEwYDVQQDDAxNeSBD
dXN0b20gQ0EwHhcNMjEwNjMwMjAyMDUxWhcNMjIwNjMwMjAyMDUxWjCBoDELMAkG
A1UEBhMCVVMxEzARBgNVBAgMCk5ldyBKZXJzZXkxEjAQBgNVBAcMCVJvY2tsZWln
aDERMA8GA1UECgwIQ3Jlc3Ryb24xDDAKBgNVBAsMA0RldjEaMBgGA1UEAwwRRm9y
dHVuZTUwMENvbXBhbnkxKzApBgkqhkiG9w0BCQEWHG15dXNlckBmb3J0dW5lNTAw
Y29tcGFueS5jb20wggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDltfYV
dFMkDMtnuSnDXK8DVNnF9HY4ciDyWQHCOHJfotPu+g9R/MJQ0gbhwjuHABztAMlu
O+Jbp6mVF7xaLX/gV9ijjmnPOlzr8OZhD5DpFG91Cpj+nAzJ33mR4fynZfpCEVxj
FVYLZnFRKbbjE82j5fggWdKrb7UAjORK8KfUcYzDupaEQchYkpYgvDnT8fogsgKr
cUZXKVGa5geexItmj0beGPgFl0njuDkRvaghdc8A8TBNMpfQXPNncoU9rSZRN9kt
ImywLjGdZ2rbO7wHs8OVPeY7LHjxfvImrOV/gU6QfhmStu1Prb9gmVcLnsrwEbU7
PhEljb35XXPJCPLnAgMBAAGjXDBaMAwGA1UdEwEB/wQCMAAwCwYDVR0PBAQDAgOo
MBMGA1UdJQQMMAoGCCsGAQUFBwMBMCgGA1UdEQQhMB+CF1JTLUNQMy5maW9zLXJv
10XRi5ob21lhwTAqAH0MA0GCSqGSIb3DQEBCwUAA4IBAQAWfK+pae8L17vGEweJ
Ksd1lRlD9ZMfrINvdTify1ETsQPCRG2k9VfjdToCLprolOBy5O8yduMUG1n9/vII
Jha7konYnKUOKdln5l/CNGLk9k50F0XmJWTfNkYPzDWVyd4qQYph8QlaR268ZyMA
B1yyF4IgFNeAAKH2mifu769sVSlwYkLlGXMu8GAwuFqjQ9pn0+RHmGetkuSuMEhj
SamsUa/Y62dR3IclFYR18f13rLzZWfnDnW4AH07fLqGn+43MEvYW2YpVbX+f4vsc
4TuYSXJn9Pozl4aRvypSnGCx8IVASUq+cH+d7rS7M1MeNnbPABb/abQvqOf+TOoI
CuGC
-----END CERTIFICATE-----
```

--------------------------------

### Import Selected Library Components from ZIP

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Import-Library

This method allows importing specific components from a ZIP file into the './app/project/libraries/' folder. It requires the path to the ZIP file and a list of component file paths using the '-l' or '--list' flag. Multiple files can be specified.

```bash
ch5-shell-cli import:library -z ./dist/exported-library.zip -l ./app/project/libraries/a.js ./app/project/libraries/b.js
ch5-shell-cli import:library -z ./dist/exported-library.zip --list ./app/project/libraries/a.js ./app/project/libraries/b.js
ch5-shell-cli imp:l -z ./dist/exported-library.zip -l ./app/project/libraries/a.js ./app/project/libraries/b.js
npm run import:library -- -z ./dist/exported-library.zip -l ./app/project/libraries/a.js ./app/project/libraries/b.js
npm run import:library -- -z ./dist/exported-library.zip --list ./app/project/libraries/a.js ./app/project/libraries/b.js
npm run imp:l -- -z ./dist/exported-library.zip -l ./app/project/libraries/a.js ./app/project/libraries/b.js
```

--------------------------------

### Deploy CH5 Archive to Device

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/UI-CH5-Archives

Example of using the ch5-cli deploy utility to send a .ch5z archive to a Crestron device. It includes parameters for the device host, type, and prompting for credentials.

```bash
ch5-cli deploy -H 192.168.1.100 -t touchscreen -p
```

--------------------------------

### Import All Library Components from ZIP

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Import-Library

This method imports all components from a specified ZIP file into the './app/project/libraries/' folder. It requires the path to the ZIP file and the '--all' flag. Supported by CH5 Shell CLI and NPM scripts.

```bash
ch5-shell-cli import:library -- -z {path} --all
ch5-shell-cli imp:l -- -z {path} --all
npm run import:library -- -z {path} --all
npm run imp:l -- -z {path} --all
```

--------------------------------

### Get Logger JavaScript Function

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Testing-Debugging/Remote-Logger

This JavaScript function retrieves the logger utility, using the previously created remote appender. The second argument 'true' enables detailed logging.

```javascript
const logger = CrComLib.getLogger(appender, true)
```

--------------------------------

### Avoiding Eval Function in JavaScript

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Best-Practices/BP-JavaScript

Shows an example of the `eval()` function in JavaScript, which executes a string as JavaScript code. It is strongly advised to avoid using `eval()` due to performance and security risks.

```javascript
eval("alert('Hi');");

```

--------------------------------

### Control System Emulation for State Signal Changes

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Advanced/Utility-Functions

This JSON configuration demonstrates control system emulation for managing state signal changes, specifically 'Wifistrength'. It defines cues that trigger actions upon state changes, linking them to the 'Wifistrength' state. The 'onStart' section initializes the 'Wifistrength' state to 0. This setup is used to emulate how the control system would interact with the CH5 UI elements and state subscriptions.

```json
{
    "cues": [
        {
            "type" : "n",
            "event": "ChangeWifistrength",
            "trigger": "&change",
            "actions": [ 
                {
                    "type": "n",
                    "logic": "link",
                    "state": "Wifistrength" }
            ]
        }
    ],
    "onStart": [
        {
            "type": "n",
            "state": "Wifistrength",
            "value": 0
        }
    ]
}
```

--------------------------------

### Get Help for Export Components Command

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Export-Components

This command retrieves help information for the export components functionality. It displays available options and usage instructions, which is useful for understanding the full capabilities and parameters of the command.

```bash
npm run export:components -- --help
```

--------------------------------

### Deploy CH5 Project to Control System using ch5-cli

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Platforms/X-Deploy

This script configures the 'package.json' file to include a command for deploying a CH5 project to a control system using the ch5-cli tool. It requires the control system's IP address and deploys the project as a HTML5 Web XPanel.

```json
{
  "scripts": {
    "build:deployweb": "ch5-cli deploy -H [ip address] -p -t web dist/prod/shell-template.ch5z",
    "build:onestep": "npm run build:deployweb && npm run build:archive",
    "build:onestepweb": "npm run build:deployweb && npm run build:archive"
  }
}
```

--------------------------------

### Import All Assets from ZIP (CH5 Shell CLI)

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Reference/Import-Export/Import-All

Imports all components, assets, and libraries from a specified ZIP file to the './app/project/' folder using the CH5 Shell CLI. Requires the path to the ZIP file as an argument.

```bash
ch5-shell-cli import:all -- -z {path} --all
```

--------------------------------

### Namespace Creation and Usage in JavaScript

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/Best-Practices/BP-JavaScript

Illustrates how to create a namespace in JavaScript by declaring an object and attaching properties and methods to it. This helps in organizing code and avoiding global scope conflicts.

```javascript
var MyNamespace = {};  
MyNamespace.cost = 5;  
//...time goes by...  
console.log(MyNamespace.cost);

```

--------------------------------

### Create CH5 Archive (.ch5z) File

Source: https://sdkcon78221.crestron.com/sdk/Crestron_HTML5UI/Content/Topics/UI-CH5-Archives

Example of using the ch5-cli archive utility to create a .ch5z project archive file. It specifies the project name, source directory, output directory, and a contract file.

```bash
ch5-cli archive -p my_project -d dist/prod/Shell -o dist/prod -c ../../contract/output/my_contract/interface/mapping/my_contract.cse2j
```
Tokens:
Raw