Upgrade a Project from v1 to v2

The Crestron HTML5 User Interface v2.0 release provides an improved component library and project template with new features and bug fixes. To update an existing CH5 v1.3 template project to a v2.0 project, the project template and component library must be updated as described below.

NOTE: CH5 v1.0, v1.1, and v1.2 template projects are not able to use the upgrade project function to upgrade to a v2.0 project. These older projects must be updated manually. A v1.3 project cannot be upgraded to any CH5 version greater than v2.0. A CH5 v2.x project cannot be upgraded to a higher 2.x version.

NOTE: Prior to upgrading a v1 template project:

  • Install the latest versions of CH5-CLI and CH5-Shell-CLI on your system globally as described in Install CH5 Developer Tools.
  • Create a backup of the v1 project before performing the upgrade procedure.
  1. From the command prompt, change directories to your app folder path within the v1 project.
  2. Issue the following command to initiate a project upgrade:

    3. Copy 
    ch5-shell-cli upgrade:project

    If the upgrade is successful, a success message is displayed. The upgrade project command upgrades project-config.json to resemble the v2 project structure. Additionally, the entire template folder, node_modules folder (if it exists), assets, fonts, vscode, License.txt, copyright.txt, README.md, index.html, app.config.js, webpack.common.js, webpack.dev.js, webpack.prod.js, and package-lock.json files will be overwritten with the v2 files.

    NOTE: The pageProperties and widgetProperties nodes are removed from the project-config.json file as part of a v2 upgrade.

  3. Any JavaScript files in the project must be updated manually as shown in the following table.
    4. Version 1 Version 2
    Copy 
    var page1Module = (function () {

        /** 
         * All public or private methods  
         * which need to call onInit 
         */ 

        const page1ImportPage = document.querySelector('#page1-import-page'); 

        if (page1ImportPage !== null) { 
            page1ImportPage.addEventListener('afterLoad', onInit); 
        }
    }
    Copy 
    const page1Module = (() => { 

       /** 
         * private method for page class initialization 
         */ 

        let loadedSubId = CrComLib.subscribeState('o', 'ch5-import-htmlsnippet:page1-import-page', (value) => {
            if (value['loaded']) { 
                onInit(); 
                setTimeout(() => { 
                    CrComLib.unsubscribeState('o', 'ch5-import-htmlsnippet:page1-import-page', loadedSubId); 
                    loadedSubId = ''; 
                }); 
            }
        }); 
    }
  4. Any themes nodes in the project-config.json file need to be updated manually as described in Change the Theme.