resir014 / nodecg-react-typescript-tailwind-quickstart

Get started creating NodeCG bundles with React + TypeScript + TailwindCSS in seconds.

nodecg-react-typescript-tailwind-quickstart

Get started creating NodeCG bundles with React + TypeScript + TailwindCSS in seconds.

Getting started

Prerequisites

You will need:

• Git
• Node.js (v16.0+)
• Yarn (v1)

Install NodeCG

Follow this guide to install and run NodeCG locally.

In summary:

# Install nodecg + dependencies
npm install --global nodecg-cli
mkdir nodecg
cd nodecg
nodecg setup

Setup the bundle

On your root NodeCG bundle, install the bundle via the NodeCG CLI

cd bundles
git clone https://github.com/resir014/nodecg-react-typescript-tailwind-quickstart.git my-bundle-name
cd my-bundle-name
yarn

Then, update the bundle's package.json to match the new bundle name.

{
  "name": "my-bundle-name"
}

Start developing

On one terminal window, run a local server for development.

yarn watch

On another terminal window, navigate to the NodeCG root folder, and start the server.

# Run nodecg locally
nodecg start

Creating bundle files

The Webpack config is set up so you can easily create multiple dashboard/graphics files and will be bundled separately.

As long as you follow these naming conventions, all files are automatically generated in the main dashboard/graphics folders.

my-bundle/
├─ package.json
├─ webpack.config.js
└─ src/
   ├─ dashboard/
   │  ├─ [name].dashboard.html
   │  ├─ [name].dashboard.tsx
   │  └─ [name].dashboard.css
   └─ graphics/
      ├─ [name].graphics.html
      ├─ [name].graphics.tsx
      └─ [name].graphics.css

Then, you can manually add these into your bundle config on the package.json file.

{
  "nodecg": {
    "dashboardPanels": [
      {
        "name": "index",
        "title": "Index",
        "width": 6,
        "file": "index.html",
        "headerColor": "#68717b"
      },
      {
        "name": "second",
        "title": "Second Panel",
        "width": 4,
        "file": "second.html",
        "headerColor": "#0070f3"
      }
    ],
    "graphics": [
      {
        "file": "index.html",
        "width": 1920,
        "height": 1080
      },
      {
        "file": "other-graphic.html",
        "width": 1920,
        "height": 1080
      }
    ]
  }
}