Directory Structure

This topic describes the files and folders provided within the template directory. To view the complete directory structure, refer to Crestron Template Project Directory.

The root folder of the source directory consists of the following important files.

  • /app.config.js: A configuration file which captures the path for important folders and files.
  • /webpack.dev.js: A development webpack file
  • /webpack.prod.js: A production webpack file
  • /webpack.common.js: A common webpack file across different environments like Dev and Prod
  • /package.json: This file is used to give information to NPM that allows it to identify the project as well as handle the project's dependencies

The root folder contains an /app/ folder. This is the primary folder that contains the code for the project. The project consists of index.html page, and other folders as follows:

  • index.html: This file is generated automatically using the template and project configuration information and contains the header, footer, content (pages and widgets) and common HTML code of the application.
  • project-config.json: This file contains information related to the project configuration and relevant components. Refer to Project Configuration File for more details.

The structure inside both the /template and /project folders is similar.

The /template and /project directories of the template have been created to make it easier for developers to work within the template. Most development work should occur in the /project directory, while only certain tasks should be performed in the /template directory. This documentation provides the paths where development should occur for each provided task.

The folder structure is as follows:

  • /app/template/assets/: This directory consists of the data, fonts, img, and scss.
    • /app/template/assets/data/: This directory contains language translation files like en.json etc in the subfolder /app/template/assets/data/translation/.
    • /app/template/assets/scss/: This directory contains all SASS related files.
      • /app/template/assets/scss/library/: This directory consists of the scss files specific to the bootstrap library. No modifications should be made to these library files.
      • main.css: This file contains references to template and project scss files. This file is the primary file used in webpack to generate the css files in the output dist directory.
    • /app/template/assets/fonts: The directory consists of all font files required in the project.
    • /app/template/assets/img: This directory contains all images.
    • /app/template/assets/libraries: The libraries directory is meant for JavaScript files that are used throughout the application.
      • /app/template/assets/libraries/translate.js: This file contains functions for language translations.
      • /app/template/assets/libraries/service.js: This file contains functions that are helpful for connecting to emulator and the contract editor.
      • /app/template/assets/libraries/utils.js: This file can be used to write utility and helper functions for the project.
      • /app/template/assets/libraries/feature.js: This file can be used to change the project theme.
      • /app/template/assets/libraries/navigation.js: This file contains navigation functions for the project.
      • /app/template/assets/libraries/project-config.js: This file contains functions that are used to managed the project-config.json file.
      • /app/template/assets/libraries/webxpanel.js: This file contains functions that are used for HTML5 Web XPanel integration.
  • /app/template/components: This folder consists of two subfolders: pages and widgets. These subfolders contain .html, .js, .scss and related emulator JSON files (as applicable). The template comes with the following widgets.
    • /app/template/components/widgets/version-info/
    • /app/template/components/widgets/remote-logger-settings/
  • /app/project/assets/: This directory consists of the data, fonts, img, scss, and vendor files.
  • /app/project/assets/data/: This directory contains language translation files like en.json etc in the subfolder /app/project/assets/data/translation/ The final generated translation file is a mxiture of translations from the template and project folders. The project folder translation keys override the template folder translation keys wherever they match. This gives flexibility to the developer to make changes to project level translation files without disrupting the template folder translation files.
  • /app/template/assets/scss/: This directory contains all SASS related files.
    • /app/project/assets/scss/: This directory consists of scss files (including mixins) that are specific to the project.
    • /app/project/assets/scss/themes/: This directory comprises different themes that can be applied to the project screens.
  • /app/project/assets/fonts: The directory consists of all font files required in the project.
  • /app/project/assets/img: This directory contains all images. Navigation related images should be placed in this folder.
  • /app/project/assets/libraries: The libraries directory is meant for JavaScript files that are used throughout the application.
  • /app/project/components: This folder consists of two folders: pages and widgets. These subfolders contain .html, .js, .scss and related emulator JSON files (as applicable). The files in the pages folder are generated based on the ch5-shell-cli create:project command. If a default project is created, it will contain a single page (page1).