Uibuilder new GitHub vNext release `beta.1`

Another step closer to release :slight_smile:

To install from GitHub, npm install totallyinformation/node-red-contrib-uibuilder#vNext.

I'm afraid that there has been a bit of a gap in releases recently, sorry about that but I've been busy on other things. But I'm hoping that I might even get the big v5 release published over the next week - fingers crossed.

In this release, a new feature that lets you ping the uibuilder web server from the client. This is intended to allow clients to auto-refresh security tokens when using external security (e.g. via a reverse proxy). Since most updates happen over websockets which wouldn't necessarily trigger a token refresh. But you can also use it to check whether the uibuilder web server is actually responding and it returns the server headers which you can't easily get otherwise. The setPing function in the FE library takes an optional argument which, if greater than 0, will repeat the ping every n milliseconds.


A new Svelte basic template has also been added. Needs some instructions but basically, you should set the "Serve" advanced setting to dist to see it in action. If you want to make changes to the front-end, you will need to use npm to install the dev dependencies.

Using Svelte allows you to have a very dynamic UI without the overheads normally seen with things like REACT and even Vue since a lot of the heavy lifting is done during the build. There will be some more advanced examples later on using the external templates feature including some examples showing how to create a config-driven ui (no front-end coding).


uibuilder now also has socket.io-client as a dependency. I tried to avoid it but the server only contains a limited version of the client which doesn't work in all scenarios. This should make it easier for people who wish to use their own build processes and want to include the client in their bundle.


In the releases last month, I made quite a few improvements to the Tech Docs, added the ejs template library because uibuilder is now able to do server-side templating using ejs. Added ExpressJS custom server settings to settings.js (which is where you can turn on the ejs templating if you want it). Also changed some of the built-in info displays to use the new built-in uibuilder CSS which adapts to light/dark browser modes.


Still a couple of things to get done before publishing.

I want to add a new middleware feature. You already have custom middleware options (via your own .js files) for ExpressJS, Socket.IO connections and Socket.IO inbound messages (from the client). I want to add an outbound message middleware so that you can dynamically amend any outbound messages to the client if you wish to. These middleware features make up for the removal of the uibuilder built-in security which has been holding up development for so long and has now been removed.

I also need to finish updating the new security documentation.

Check out the roadmap in the Tech Docs for some of the fantastic features and options that I have planned for the future once v5 is launched!

That will include some web components, probably a brand new, completely rewritten version of the front-end client library with dynamic loading and module support. Ability to run the instance npm scripts from within the Editor (letting you do builds, watch, installs, etc). Adding package update display and install for the package manager. Enhancing the power of templates. Moving to dynamic imports for less-used code so as to reduce resource usage.

And of course, I'll be continuing on the journey to enable higher-level use of uibuilder - looking to ever reduce or eliminate the need to write front-end code.

And much, much more!

2 Likes