Skip to content

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

License

Notifications You must be signed in to change notification settings

TotallyInformation/node-red-contrib-uibuilder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

679a18b · Apr 16, 2023
Mar 6, 2023
Apr 1, 2022
Mar 4, 2023
Apr 11, 2023
Mar 26, 2023
Apr 16, 2023
Apr 16, 2023
Apr 8, 2023
Apr 16, 2023
Mar 24, 2023
Apr 11, 2023
Dec 29, 2021
Jan 8, 2023
Feb 23, 2019
Nov 30, 2022
Apr 16, 2023
Jan 20, 2018
Apr 18, 2017
Mar 5, 2023
Feb 11, 2023
Oct 16, 2021
Apr 16, 2023
Oct 6, 2021
Apr 16, 2023
Apr 16, 2023
Jun 13, 2022
Mar 11, 2023
Feb 16, 2021

Repository files navigation

NPM Version NPM Total Downloads NPM Downloads per month GitHub last commit GitHub stars GitHub watchers GitHub license Min Node Version Package Quality DeepScan grade CodeQL Open Issues Closed Issues

node-red-contrib-uibuilder

uibuilder provides a stand-alone web server that allows for interfacing with Node-RED, while giving you help and complete freedom to create custom web interfaces.

It includes many helper features that can reduce or eliminate the need to write code for building data-driven web applications and user interfaces for Node-RED.

Installation

uibuilder is best installed using Node-RED's Palette Manager.

Manual installs and other versions

To install manually, from a command line on your Node-RED server:

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

To install old versions:

cd ~/.node-red
npm install [email protected]

To install development branches, please install from GitHub:

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

You will need to restart Node-RED if installing manually.

Updates

The current CHANGELOG contains all of the changes and requirement details for each version.

Older changes can be found in the previous change documents: CHANGELOG-V5, CHANGELOG-V3/V4, CHANGELOG-v2, and CHANGELOG-v2

Getting started

Once installed, The following is a typical simple flow to get going.

  1. Add a uibuilder node. Open its settings and give it a "URL" which is used as the identifying name. Close the settings and click on the Deploy button.
  2. Add an inject node for some simple input data and two debug nodes on the two output ports so that you can see everything that is going on. Deploy the flow.
  3. Re-open the uibuilder node's settings and click the "Open" button to see the resulting web 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.

Please see the First-timers walkthrough in the documentation and the Introduction Video for more help to get started. Also try out the built-in example flows.

Examples

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

The templates feature in uibuilder provides working front-end code of various configurations.

Other examples can be found on the Node-RED Flows site and the uibuilder WIKI. Also see the FAQ's and answered questions on the Node-RED Forum.

Documentation

Please refer to the Documentation web site. This can also be accessed from within uibuilder nodes even without an Internet connection.

There is a library of "official" video tutorials on YouTube. Other folk have also produced uibuilder-related content.

Purpose

The purpose of uibuilder is to:

  • Support easy methods for creating and delivering data-driven web apps and web pages (also known as web User-Interfaces).
  • Be a conduit between Node-RED and front-end (browser) UI web apps.
  • Be UI framework agnostic. No framework is needed to use uibuilder but it will work with them where desired. uibuilder aims to reduce the requirement for a framework by making it easier to work with vanilla HTML/CSS.
  • Provide interface/data standards for exchanging data and controls between Node-RED and the web pages.
  • Enable the creation and management of multiple web apps from a single Node-RED instance.
  • Reduce the amount of front-end code (HTML/JavaScript) needed to create and manage a web app.
  • Reduce the knowledge required for creating reliable, accessible web apps by providing low-code and no-code features.
  • Make it easy to install and serve front-end libraries to support the development of more complex web apps.

Features

The core features of uibuilder:

  • Provides nodes to enable zero-code translation of input data to usable and accessible web elements.
  • Provides capability for low-code, configuration-driven (data-driven) UI's. Creating a framework for describing a UI and translating to actual code without having to write code.
  • Provides a 2-way communications channel between the Node-RED server (back-end) and front-end UI.
  • Provides a Node-RED node to act as the focus for communications with other nodes for additional ease of use.
  • Provides a front-end library to: do the complex parts of the communications in the client browser; make manipulation of the UI easier and more consistent; make it easy to get data back to Node-RED as needed (both automatically and manually).
  • Provides easy to use templates and examples for front-end code to enable people to get a quick start on creating web apps.
  • Provides management and serving of npm packages that provide front-end libraries consumable easily by front-end code.
  • Allows editing of front-end code from the Node-RED Editor (designed for small changes, use web development tools generally).
  • Enables the use of external authentication and authorisation methods and services to control multi-user access to web apps.
  • Provides various server middleware and API options for additional custom capabilities.
  • Allows as many uibuilder node instances as you like. Each instance allows the creation of many web pages and sub-folders for easy management.
  • Each uibuilder node instance provides a private 2-way communications channel between the Node-RED server (back-end) and browser (front-end) UI code.
  • Supports the use of standard web development workflows.
  • Allows the creation of a dedicated web service to facilitate independent security.
  • Provides a caching capability allowing newly joining clients to receive the latest data and configurations. Joining/leaving clients create notifications in Node-RED.
No-code UI's

uibuilder is still growing towards offering more no-code capabilities like Node-RED's Dashboard extension does. However, it is starting to offer these features via the "new" client available since v5. V6.1 introduced the new uib-element and uib-update nodes that offer the first usable no-code features.

uib-element takes in simple data and outputs configuration data. This can then be sent to the front-end via the uibuilder node. Alternatively, it can be saved and the result used in an initial load. Several simple options such as tables and lists are available in uibuilder v6.1, additional elements and structures will be made available in future versions. The uibuilder front-end client takes the configuration information and dynamically builds HTML elements and inserts them to the web page (or removes/updates as needed).

While this is not the most efficient processing approach (since updates are mostly replacing the whole element which could be quite large for things like big tables), it is very efficient from an authoring perspective. So the uib-update node provides a more targetted approach to updating and changing specific attributes and "slot" content for elements.

It is important to note that no front-end, 3rd-party frameworks such as VueJS or REACT are needed for this approach! Everything uses vanilla HTML, JavaScript and CSS under the skin and so is compatible with current and future web standards.

Low-code UI's

The data that uib-element outputs is a format that you can use in your own flows in Node-RED and even in front-end code if desired. It describes a set of HTML UI elements but does not need you to actually write HTML code. The configuration schema is very flexible and even allows you to load configuration data, HTML, scripts, and new ECMA Modules/Components from external files.

The schema and the UI creator functions built into the front-end client are specifically designed to work with current and future HTML standards in order to avoid the kinds of issues commonly encountered when using 3rd-party front-end frameworks (e.g. major version changes forcing rewrites of all of your tooling). So ES Modules, ECMA Components, and future ECMA versions should all be supported.

Future direction

The general direction of uibuilder (or associated modules) is likely to include:

  • Provide more no-code and low-code UI creation and update capabilities. As of v6.1, these are now starting to be delivered, v6.2 will extend these.
  • The ability to save updated HTML from the front-end via Node-RED so that UI building can be done once and loaded as efficient, static HTML.
  • The ability to use the zero-code features to produce HTML for other tools to use.
  • The ability within Node-RED to, for each uibuilder node, run npm scripts such as build processes and to manage instance-level npm packages.
  • Be able to install/update/remove instance-level npm packages as can already be done for uibuilder-level packages.
  • Provide a "development server" capability that auto-reloads connected clients when code changes are made.
  • A UI designer allowing users without HTML/CSS/JS skills to create reasonable web apps without code.
Feature details and benefits
  • Designed as an alternative to the Node-RED official Dashboard. Without the overheads and restrictions.
  • Control everything from the Node-RED admin ui. Edit your front-end resource files, manage front-end packages. No need to access the servers command line.
  • Manage startup templates. Internal templates for vanilla HTML, Svelte, VueJS (v2 & v3), and VueJS/bootstrap-vue are provided. Load templates from other repositories via degit. Makes it easy to share templates that provide a whole app or just deal with boilerplate.
  • Have as many custom user interfaces as you want. Just 1 node is needed for each entry point. Use link nodes to send data from other parts of your flows. An entry point can be contain multiple web pages.
  • Has a control interface separate to the message interface. Know when a browser tab connects or disconnects, send cached data, and more.
  • Provide a stable client id that identifies a specific browser profile until it is restarted. A tabId is provided that identifies a specific browser tab on a client device.
  • Provide information to Node-RED about the client that is sending a msg so that security and other processing can identify the client, the user, and so on.
  • Can be a lot lighter in weight and more mobile friendly than the Node-RED official Dashboard.
  • Use any front-end framework you like. Simply install via the built-in library manager.
  • Use without any front-end framework if you prefer. Keep it light and simple. Try this out with the "Blank" template and the uib-element node.
  • The included front-end libraries (uibuilder.iife.js, uibuilder.esm.js) provide connectivity to Node-RED and msg event handling along with some helper utility functions.
  • Write your own HTML, CSS and JavaScript to define the perfect front-end user interface for your needs. Or define it using a JSON config description.
  • Edit your custom front-end code from within the Node-RED Editor. Auto-reload your clients on changes to the code. Great for rapid development. Note that this is designed for quick edits, it is recommended to use your normal web development toolchain for larger edits.
  • Needs almost no boilerplate in your front-end code in order to work.
  • Optional index web page listing of available files.
  • Two detailed admin info web pages are included to help authors understand where everything is and what is available.
  • Uses Node-RED's own ExpressJS webservers by default. Switch to a custom ExpressJS server if desired. When using a custom server, pages can also include EJB server-side templating.
  • Has middleware for ExpressJS (for web services) and Socket.IO (for communications, both at initial connection and per-message) so that you can add your own custom features including security.
  • Can create custom API's for each uibuilder instance.
Current limitations
  • You may need to write some of your own HTML.

  • You have to know the front-end library locations for installed 3rd-party packages and edit your HTML accordingly. The uibindex admin API (accessible from any node's admin ui) shows you all of the root folders and what the package authors report as the main entry point for all active packages. There is now also a simplified information page for the currently viewed uibuilder node instance, this is access from a button in the configuration panel.

    Note that this is a limitation of npm and module authors, not of uibuilder. Unless module authors correctly identify the browser entrypoint for their libraries, uibuilder can only guess.

  • You cannot yet compile/compress your custom front-end code (HMTL, JS, SCSS, etc.) for efficiency. This will be added soon.

    This will use a local package.json file that contains a "build" script. If it exists, uibuilder will expose a build button that will run the script.

Questions, issues and suggestions

The best place to ask questions or discuss possible enhancements is the Node-RED Forum.

Alternatively, use the GitHub issues log for raising issues or contributing suggestions and enhancements and the GitHub Discussions page for general questions, suggestions, etc.

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.

Pull Requests both for code and documentation are welcomed and the WIKI is open to new entries and corrections (but please let me know if you make a change).

Please refer to the contributing guidelines for more information.

Developers/Contributors

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

profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&A sites

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