Nodecg-react-template

This is an updated revision of Hectorban work.

Nodecg react template done with parcel and typescript

This is a NodeCG bundle, powered by Typescript, React and Parcel.

If you use this template probably you are interested in use-nodecg package.

It works with NodeCG versions which satisfy this semver range: 1.9.0

Getting started

This template includes include-nodecg package so it is not necessary to install nodecg-cli before.

1. Install dependencies and build the bundle with npm

npm i

2. To start developing run:

npm run dev

Add a dashboard

1. Add the configuration in package.json. You can see how is added the current as example.
2. Copy any of the current html and rename it to the given name in the package.json to your new panel.
3. Copy any of the panel folders and rename it.
4. Replace the path to the React loader (index.tsx) in your new html with the name of your folder (if you don't do this, you will load other panel 😅).
5. Add your react components in the app.tsx and enjoy programming.

Add new graphics

1. Add the configuration in package.json. You can see how is added the current one as example.
2. Copy the current layout-1.html and rename it inside the same folder with the given name for the graphics html in the package.json.
3. Copy the folder, remember to change in the new html the path to the React loader (should rename layout-1 string with the name of your new folder).
4. Add your react components in the app.tsx and enjoy programming.

Known issues

• Extension fails when using export default main; instead of using module.exports so we are mixing commonjs modules with esmodules and that should not be done.

TODO

• Sample how to handle Dialogs and use Messages from Dialog to Dashboard panel.
• Sample how to use Replicants
• Sample how to use Messages and return errors sent from backend (extension).
• React Hooks to use Replicants and messages are available here: https://github.com/Hoishin/use-nodecg
• Testing. Check this for graphics: https://github.com/nodecg/nodecg-screenshot-tester
• Generator to create Dashboard.
• Generator to create a graphics layout.
• Distribute only generated html instead of all package.