New version of uibuilder released

73 views
Skip to first unread message

Julian Knight

unread,
Sep 22, 2017, 5:47:54 AM9/22/17
to Node-RED
Hi all, I've released a new version of uibuilder, an alternative to Dashboard for where you find the complexities of trying to wrangle Angular too much to deal with.


Many thanks to Colin Law for helping find and fix a bunch of bugs.

Dashboard is much better than uibuilder for getting going quickly and for beginners. You can build amazing things with it. However, sometimes it starts to get in the way or is too heavyweight. 

In those kinds of cases, you might find uibuilder a useful alternative. It does require more knowledge of JavaScript however as it only provides the bare minimum of a framework. It is designed to take away much of the donkey work and boilerplate in setting up web apps with dynamic messaging between Node-RED and the front-end (browser) client.

Key highlights:
  • Allows easy loading of front-end libraries so you can easily work with any of them. RiotJS, VueJS, REACT, Angular or maybe just a layout framework like Tachyon.IO. JQuery is already provided and that might well be enough for many uses. All you need to do is install the appropriate Node.JS package using npm and add the package name to the settings.js file.
  • Provides a websocket connection between the node in Node-RED and the browser. Makes it easy to pass messages back and forth. Uses the same messages you work with in Node-RED. Falls back to alternative channels if websockets is blocked for some reason.
  • Allows you to create as many web apps as you like (Dashboard can only create one), just specify unique URL's.
Please note that this node has not been hardened and I would anticipate some security issues, mainly in websockets, if trying to use over the Internet.

As always, I am more than happy for feedback. Issues and suggestions can be raised on GitHub and I welcome pull requests too.

Dave C-J

unread,
Oct 1, 2017, 11:56:39 AM10/1/17
to node...@googlegroups.com
HI - just trying your latest version with Moon.... but still not getting the basics to load - 

Inline images 1nothing in the uibuilder/dist directory for a start.... what am I not doing ? Is there a step missing to make them appear ?

Dave C-J

unread,
Oct 1, 2017, 12:31:41 PM10/1/17
to node...@googlegroups.com
No worries - figured it out... darn typo

Julian Knight

unread,
Oct 1, 2017, 4:39:59 PM10/1/17
to Node-RED
You might find some occasional socket reconnection errors in the currently published version Dave. Colin Law has been helping sort some issues out. Workaround is to reload the page. Fix is already in the dev version.

There's a new version on Github (just pushed it) with some fixes and some re-engineering. In particular, I've simplified where front-end files are by copying from the master to the local folders (with >1 folder attached to a path and overlapping file names, I was finding that sometimes, the wrong file was being served). Also means that you don't have to hunt down the master templates as they are copied to your userDir so are much easier to edit.

Nothing should be in the dist folders for now! ;-) If you put an index.html file there, neither the src files nor the vendor files will be loaded as I assume you would use webpack to mash everything up together. The logic to make that useful in the node isn't there yet I'm afraid. Ultimately, I'd like to wire in Webpack and let users do a build stage from within Node-RED but that is some way off behind a load of other, higher-priority todo's.

For now, you can simply work in the src folder.
Reply all
Reply to author
Forward
0 new messages