bakman2/node-red-contrib-uibuilder

Easily create data-driven web UI's for Node-RED using any (or no) front-end framework.

node-red-contrib-uibuilder

uibuilder provides a stand-alone webserver that allows for interfacing with Node-RED, while giving you complete freedom to create custom web interfaces using any framework you desire.

It includes many helper features that can reduce or eliminate the need to write code for building data-driven web apps.

Get Started

1. In Node-RED, use the hamburger menu. Click Manage Palette. Click the install tab. Search for uibuilder, click install.
2. Add an uibuilder node to the flow. Double click the node. Provide a name in the URL field (this becomes the endpoint). Click Ok.
3. Connect an inject node and provide some data to the msg.payload property
4. Connect two debug nodes to the two output ports.
5. Deploy the flow and click the inject node.
6. Double click the uibuilder node and click the "Open" button. This will open the uibuilder endpoint page.

You are now ready to edit the front-end html/javascript/css if you wish and to add logic in Node-RED to provide inputs and handle outputs.

Examples

Within Node-RED, use the hamburger menu. Click Import. Click Examples. Select the node-red-contrib-uibuilder folder and choose an example.

Or use one of the various examples on the Node-RED site.

Manual installation

Note: Manual installations require a restart of Node-RED.

cd ~/.node-red
npm install node-red-contrib-uibuilder

To install development branches, please install from GitHub:

cd ~/.node-red
npm install totallyinformation/node-red-contrib-uibuilder#branchname

To install old versions:

cd ~/.node-red
npm install node-red-contrib-uibuilder@v5.1.1

Documentation

Please refer to the documentation. This can also be accessed from the uibuilder node.

Questions, issues and enhancements

For questions, please use the Node-RED Forum.

For potential bugs or enhancements, please raise an issue

Contributing

If you would like to contribute to this node, you can contact Totally Information via GitHub or raise a request in the GitHub issues log.

Please refer to the contributing guidelines for more information.

Developers/Contributors

• Julian Knight - the designer and main author.
• Colin Law - many thanks for testing, corrections and pull requests.
• Steve Rickus - many thanks for testing, corrections, contributed code and design ideas.
• Ellie Lee - many thanks for the PR fixing duplicate msgs.
• Thomas Wagner - thanks for the steer and PR on using projects folder if active.
• Arlena Derksen - thanks for suggestions, bug checks and Issue #59/PR #60.
• cflurin - thanks for the cache example.
• Scott Page - IndySoft - thanks for Issue #73/PR #74.
• Stephen McLaughlin - Steve-Mcl - thanks for the fix for Issue #71 and for the enhancement idea Issue #102.
• Sergio Rius - thanks for reporting Issue #121 and providing PR #122 as a fix.
• Thorsten von Eicken - thanks for providing PR #131 to improve CORS handling for Socket.IO.
• meeki007 - thanks for supplying various documentation improvements and code fixes.
• Scott - talltechdude - thanks for supplying PR #170.
• Calum Knott - Thanks for the tidied up node-blue logo.
• Harold Peters Inskipp - Thanks for the logging examples.
• dczysz - Thanks for reporting Issue #186 and helping work through the complex async bug.

Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.

Please also check out my blog, Much Ado About IT, it has information about all sorts of topics, mainly IT related, including Node-RED.