cra-template-crestron-ch5-typescript

An unofficial third party TypeScript template for Create React App and Crestron CH5.

Setup to work with Crestron CH5 out of the box so you can get up and running quickly. It provides packages for page routing, styling using CSS-in-JS and/or TailwindCSS (you can still use regular CSS, SCSS or even CSS Modules 😄), a wide variety of icons, mobile browser console, linting and more... 🚀 🚀 🚀

Contents 📖

• Features :white_check_mark:
• Inside the Box :package:
• Getting Started :rocket:
• Enable Husky Git Hooks :dog:
• Project Configuration :zap:
• Team :soccer:
• Contributors :sparkles:
• Learn More :books:
• LICENSE :balance_scale:

Features :white_check_mark:

• ✅ Works with Crestron CH5 CrComLib out of the box.
  • No need to manually edit the CrComLib package.json 👍
• ✅ React v18 Ready
• ✅ Eruda Setup
• ✅ Basic Redux Setup
• ✅ Basic GitHub Actions CI
• ✅ Multiple Build Options
  • ✅ React App
  • ✅ Crestron CH5 Archive (.ch5z)
  • ✅ Docker Image
  • ✅ Electron App

Inside the Box :package:

• Crestron CH5 CrComLib
  • Crestron HTML5 (CH5) Components Library
• Crestron CH5 WebXPanel
  • Browser control of ch5 components library
• Crestron CH5 CLI
  • Crestron CH5 utilities
• Crestron CH5 Helper
  • A helper collection of Crestron CH5 constants 😀
• Typescript
  • A superset of JavaScript that compiles to clean JavaScript output
• React Router
  • Declarative routing for React
• Redux
  • Predictable state container for JavaScript apps
• React Redux
  • Official React bindings for Redux
• Redux Toolkit
  • The official, opinionated, batteries-included toolset for efficient Redux development
• Styled Components
  • Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps 💅
• TailwindCSS
  • A utility-first CSS framework for rapid UI development
• clsx
  • A tiny (228B) utility for constructing className strings conditionally
• React Icons
  • svg react icons of popular icon packs
• React Crestron CH5 Hooks
  • A collection of Crestron CH5 hooks ⚓ for React 😀
• Rooks
  • Essential React custom hooks ⚓ to super charge your components!
• Eruda
  • Console for mobile browsers
• Axios
  • Promise based HTTP client for the browser and node.js
• ESLint
  • Find and fix problems in your JavaScript code
• Prettier
  • An opinionated code formatter
• Husky
  • Git hooks made easy 🐶 woof!
  • NOTE This feature needs to be manually enabled. See here for more details.
• Lint-Staged
  • 🚫💩 — Run linters on git staged files
  • Requires Husky to be enabled.
• Commitizen
  • Create committing rules for projects 🚀 auto bump versions ⬆️ and auto changelog generation 📂
• commitlint
  • 📓 Lint commit messages
  • Requires Husky to be enabled.
• GitHub Actions CI
  • Automate your workflow from idea to production
• VSCode Workspace Settings
• EditorConfig
• Docker Support
  • Build safer, share wider, run faster
  • Requires Docker and Docker-Compose to be installed on your local machine. Portainer is also recommended as a front end for managing Docker containers. It is free and open-source.
• Electron Support
  • Build cross-platform desktop apps with JavaScript, HTML, and CSS

Getting Started :rocket:

To use this template, add --template @norgate-av/crestron-ch5-typescript when creating a new app.

For example:

npx create-react-app my-app --template @norgate-av/crestron-ch5-typescript

# or

yarn create react-app my-app --template @norgate-av/crestron-ch5-typescript

Enable Husky Git Hooks :dog:

Currently, to use the Husky Git Hooks feature provided by this template you must manually run the following command within the project directory after the bootstrap completes. This will update the local git configuration to use the hooks in the .husky directory.

npm run husky:install

# or

yarn husky:install

Project Configuration :zap:

To upload to a Crestron touchscreen or control system using the scripts provided by this template, add the IP address or hostname to the project properties in package.json.

{
    "crestron": {
        "project": {
            "touchscreen": {
                "url": "Enter IP/Hostname of Crestron Touchpanel here...",
                "type": "touchscreen"
            },
            "web": {
                "url": "Enter IP/Hostname of Crestron Processor here...",
                "type": "web",
                "config": {
                    "host": "localhost",
                    "ipId": "0x03",
                    "roomId": ""
                }
            }
        }
    }
}

Team :soccer:

This project is maintained by the following person(s) and a bunch of awesome contributors.

Contributors :sparkles:

Thanks go to these awesome people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

Check out the contributing guide for more information.

Learn More :books:

To learn more, check out the following resources:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.
• Crestron CH5 - Documentation and resources for developing with Crestron CH5.

LICENSE :balance_scale:

MIT