Node-RED Dashboard custom node

Developing Nodes
1

Is it possible to create a custom node for Node-RED Dashboard? If so, where's the documentation on that?

I'd like to create a new Template node that uses React instead of AngularJS v1.

I've been working on this myself, but I'd like to see if there's a better way.

Getting data into the React would have to happen through various methods, Redux, Native JS events, etc. The goal is just setting up the code as a dashboard element.

2

Yes. Not sure about docs as I don't really use Dashboard. But there are plenty of examples now that you may be able to reference.

Don't think that will be as useful as you think. Dashboard is based on a deeply embedded version of Angular v1. So you would be trying to mix Angular with REACT, I can't imagine that will work out well.

If you don't need the rest of Dashboard, you could use uibuilder instead. This provides a control node that delivers some web service extensions and communications channels to the front-end code and a front-end helper library. While it uses VueJS for its default template, you can ditch that for REACT.

3

The most commented node is the mylittleuinode in this repository - GitHub - node-red/node-red-ui-nodes: Additional nodes for Node-RED Dashboard

1 Like
4

Thanks for the link @dceejay! It's a lot cleaner than the code in Node-RED Dashboard.

I figured this out on Wednesday, but it's possible I could use some improvement.

My method of handling this was listening to io directly on window and when messages came in for 'update-value', I checked the id against the node.id which I put on the React root node as a data attribute.

Although, the implementation of mylittleuinode would've been much cleaner than trying to modify ui_template :+1:.

From there, it was smooth-sailing, but not really.

There were some other issues to figure out:

  1. React apps typically render on a single root element identified by its id. But Node-RED could render the same React app multiple times in the same HTML document. That means you can't use id and have to make sure you're rendering each app into its own div.
  2. When updating the source in a Node, it will cause a complete re-render of the React app, but it doesn't unmount the old one before doing so.

I solved both problems already, but I just thought up a simpler method.

If you render the React app in an iframe using srcdoc, you can do window.top.io in the iframe's context to get access to the Socket.io instance in the parent window.

This solves a few problems:

  1. When the iframe's re-rendered with the new React code, the old one is automatically removed.
  2. You can lookup root nodes by their id because there will only be one in the iframe's context.
1 Like
5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.