Loading Exported CH5 Code in Visual Studio Code

A step-by-step guide for engineering teams. Covers finding the official Crestron CH5 shell template, opening it in VS Code, and exactly which files from the AV-X export zip replace which files in the template.

1

Install Node.js (LTS)

Download and install the current LTS from nodejs.org. Verify in a terminal:

node --version
npm --version
2

Install Crestron CH5 Shell CLI

This is the official tool that scaffolds the shell-template project. Install it globally:

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

Verify it landed:

ch5-shell-cli --version
3

Install Visual Studio Code

Download from code.visualstudio.com if you don't already have it. The Crestron docs recommend VS Code as the working editor for shell-template projects.

4

Scaffold a new shell-template project

Open a terminal in the folder where you want the project to live, then run:

ch5-shell-cli create:project --projectName "avx-panel"

This creates a folder avx-panel/ containing the full Crestron shell-template stencil — pages, config, build tooling, and the app/project/components/pages/ directory where your exported pages go.

5

Open the project in VS Code

Either use File → Open Folder and select the avx-panel folder, or from the terminal:

cd avx-panel
code .
6

Install dependencies

Inside the VS Code terminal (Terminal → New Terminal):

npm install

This pulls the CH5 libraries (CrComLib, ch5-shell utilities) into node_modules/.

Start by downloading the export from the CH5 / Contract Export tab on the Site Builder page. Use Download All to get a zip named avx_ch5_<site>_<processor>.zip.

Unzip it. The mapping below shows every file in the export and exactly where it goes inside the template project.

project-config.json

Registers your pages (pagehome, pageav) with the shell. Replace the template's generated config entirely.

project-config.json
project-config.json
Overwrites the root config — defines page names, navigation, theme, and Web XPanel flag

pagehome (Home tile grid)

Only present if you configured a "home" type panel page. The template ships an empty page — replace its contents.

pagehome/pagehome.html
app/project/components/pages/pagehome/pagehome.html
pagehome/pagehome.js
app/project/components/pages/pagehome/pagehome.js

pageav (AV control surface)

The main room-control page. The SCSS compiles to CSS during the build — drop the source .scss in; the build pipeline handles it.

pageav/pageav.html
app/project/components/pages/pageav/pageav.html
pageav/pageav.scss
app/project/components/pages/pageav/pageav.scss
Compile step runs automatically via the shell's Gulp/Sass pipeline
pageav/app.js
app/project/components/pages/pageav/app.js

bridge (SIMPL+ modules + contract)

These are not part of the CH5 web project — they load on the Crestron processor in SIMPL Windows. Keep them in a sibling folder for reference, or import the .cce into the Contract Editor.

bridge/avx_bridge_*.usp
(Crestron SIMPL Windows — not VS Code)
One .usp per room + global + mics + BluOS players
bridge/contract.cce
Crestron Contract Editor
Import to generate the join map between CH5 signals and SIMPL logic
bridge/signal-map.json
(reference only — machine-readable signal map)

Brand logo

Referenced by project-config.json as the shell's brand logo. If the zip includes it, place it here; otherwise the template's default logo is used.

template/assets/img/AV-X_Logo_RGB_Purple.svg
app/template/assets/img/AV-X_Logo_RGB_Purple.svg

Common Gotchas

  • Page folder names must match — the export uses pagehome and pageav (lowercase, no hyphens). Don't rename them or navigation breaks.
  • project-config.json is the source of truth for which pages load. If a page folder exists but isn't registered there, the shell won't show it.
  • .usp files don't go in VS Code — they're SIMPL+ source for the processor. Load them in SIMPL Windows alongside your room logic.
  • contract.cce is imported once into the Crestron Contract Editor to generate the join map. Re-import when you add or rename signals.
  • SCSS, not CSS — the export ships pageav.scss. The shell's build pipeline compiles it; don't try to drop in a .css file.

You're Done

After replacing the files and running npm run build, the panel is ready to archive and deploy. The CH5 panel talks directly to the processor via CrComLib contract signals; the SIMPL+ bridge modules relay the same signals to the AVX middleware for the Base44 web panel.