Appearance

rosepetal-node-red-contrib ​

rosepetal-node-red-contrib contains custom Node-RED nodes and Node-RED Dashboard 2 widgets used by Rosepetal projects.

Table of Contents ​

Requirements ​

Before you start, make sure you have the following installed:

  • Node.js: version 18 or higher
  • npm: Node.js package manager

Installation ​

Clone the repository and install its dependencies from the project root:

bash
git clone <repository-url>
cd <repository-name>
npm install

Development ​

The root development mode is selective by default. This avoids starting 20+ watchers at the same time.

Watch a single widget:

bash
npm run dev -- ui-imagequeue

Watch multiple widgets:

bash
npm run dev -- ui-imagequeue ui-imagelog

Watch all widgets in parallel. This can be heavy:

bash
npm run dev:all

Build ​

Build the project with:

bash
npm run build

This generates the Vite resources and makes them available to Node-RED Dashboard 2.

Resource Management ​

Copy resources ​

Resources are copied automatically during the build process. To run the copy step manually:

bash
npm run copy-resources

Clean resources ​

To remove generated resources:

bash
npm run clean

Creating a New Node ​

To add a new node, register it in the node-red section of package.json.

Example for a node named new-node:

json
"node-red": {
  "version": ">=3.0.0",
  "nodes": {
    "new-node": "path/to/new-node/new-node.js"
  }
}

If the new node is also a dashboard widget, register it in the node-red-dashboard-2 section of package.json.

Example for a widget named new-widget:

json
"node-red-dashboard-2": {
  "version": "1.0.0",
  "widgets": {
    "new-widget": {
      "output": "new-widget.umd.js",
      "component": "NewWidgetComponent"
    }
  }
}

After registering the node or widget, run a build to verify that the changes are generated correctly:

bash
npm run build

Project Structure ​

text
.
├── rosepetal-dashboard/       # Custom widgets and nodes
│   ├── ui-fabric-canvas/      # UI Fabric Canvas component
│   ├── ui-line-setter/        # UI Line Setter component
│   ├── ui-sessionstatus/      # UI Session Status component
│   └── ...                    # Other components and nodes
├── resources/                 # Additional resources
├── package.json               # Project configuration
└── vite.config.js             # Vite configuration

Notes ​

  • Run all commands from the project root.
  • Make sure your Node.js version is compatible with the project requirements: >= 18.
  • This project uses npm workspaces to manage multiple packages.