[Feature Release] node-red-contrib-uibuilder v4.1.0

So, I really am spoiling you this month! Not only a major release but a follow-on feature (and bug) release as well! :grinning:

v4.1.0 has a couple of nice features that I was able to add quickly. I wasn't going to publish yet but as I needed to fix a bug as well ... here they are.

I know that some of you have been patiently waiting for a better way to switch between front-end code in the src and dist folders and to do so without having to restart Node-RED. Well now you can!

No doubt in the future, I will go further and allow any folder to be used but this is good enough for now.

The other feature is in the front-end library. You can now use JavaScript to update the msg programmatically. That means that you can pretend to "send" a message (might be an easy way to do rapid testing). It also means that you could use some external event or data source along side messages from Node-RED but still keep a single logic function to handle it all.


  • Add drop-down to advanced settings that lets the served folder be changed between src and dist. #147

    • If the <uibRoot>/<servedFolder> folder does not exist, it will be silently created.
    • If the <uibRoot>/<servedFolder>/index.html file does not exist, a warning will be issued to the Node-RED log & the Node-RED debug panel.
  • Allow front-end code to update the msg. #146

    This allows your front-end code to be its own test harness by pretending that a msg has been sent from Node-RED. It would also let you have a single processing method even if you wanted to use a non-Node-RED data input (e.g. a direct MQTT connection or some other API).

    uibuilder.set( 'msg', { topic:'my/topic', payload: {a:1, b:'hello'} } )

    When using this feature, the uibuilder.onChange('msg', function(msg) { ... }) function is still triggered as expected.


  • #148 Editor node config cannot escape https check when not running in development mode

Hello Julian .. excellent work with the new features ..

I was having some problems connecting with Socket with the new 4. versions ..
I get this in the browsers console

I'm using Parcel bundler to build the application with the following code


    <title>Energy Monitoring</title>
    <div id="app"></div>

    <!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
    <!-- <script src="./../../../node_modules/node-red-contrib-uibuilder/node_modules/socket.io/client-dist/socket.io.js"></script> -->
    <!-- <script src="../../../node_modules/node-red-contrib-uibuilder/node_modules/socket.io/client-dist/socket.io.js"></script> -->
    <script src="./app.js"></script>


import Vue from 'vue'
import App from './components/App.vue'
import router from './router'

//  import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js'
import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/front-end/src/uibuilderfe.js'
//import uibuilder from './uibuilderfe.js'

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
// Optionally install the BootstrapVue icon components plugin

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Vue.use(uibuilder)
window.uibuilder = uibuilder;

new Vue({
    el: '#app',
  // runtimerCompiler: true, 
  //  store,
    render: h => h(App)

and in my main App.vue file i used to start uibuilder with :
uibuilder.start('/monitor', '/uibuilder/vendor/socket.io')
(i tried different combinations also .. commented out)

mounted() {
  uibuilder.start('/monitor', '/uibuilder/vendor/socket.io')
  // uibuilder.start('/monitor', '../uibuilder/vendor/socket.io/socket.io.js')
  //uibuilder.start('/monitor', '../uibuilder/vendor/socket.io')

any ideas what could be the problem?

Not had a chance to look in detail but one reason for getting 400 errors is a mismatched Socket.IO client and server version. Are you sure that you have a v4 socket.io client? Maybe picking up the wrong version from somewhere? Maybe some aggressive caching?

I'll do some more digging tomorrow. Versions of node.js, node-red and your browser might also give some clues.

you are right .. by checking the Uibuilder index it shows an older version 2.4.1
(i'll see if unistalling the old one and re-installing uibuilder will update to the correct one)

Node-RED version: v2.0.2
Node.js version: v14.16.0
Firefox v.89

Right, that explains it then. That is the danger of packaging - perhaps you included uibuilderfe and socket.io libraries in your build? uibuilder v4 jumped from socket.io v2 to v4 (v3 it seems didn't last long) and it is a major difference in places.

It would be safer to avoid packaging the external libraries into your build and as long as you are using the .min versions of everything, I very much doubt you will see a lot of difference. Otherwise, you have to remember to do a rebuild every time you update the uibuilder node package.

uibuilderfe .. yes .. with the command
import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/front-end/src/uibuilderfe.js'

for socket io .. no .. because uibuilderfe.js requires it itself with
var io = require('socket.io-client')

Your words for a socket version mismatch pointed me in the right direction.
so i cleaned the node_modules folders and package-lock, both for nodered and uibuilder folder and did a
npm install again in both to recreate it.

Then the error in the Parcel build step was a little more obvious

I run npm install socket.io-client in node-red-contrib-uibuilder folder and success / error gone.

Im guessing the bundler was picking up socket.io-client further up in the folder chain possibly because the node-red dashboard also had version 2 as a dependency. (Not really sure because i tried so many different random things)

Well .. All good know .. back and running and with your latest uibuilder version. Thanks :wink:

Cool. No problem. Though I do think that you are not really getting any tangible benefit from running uibuilderfe through your build.

At some point, I think I will make http/2 an option if you are using a dedicated ExpressJS server for uibuilder (which is an option now but only for http/https). At that point I'm pretty certain you won't get any benefit at all. Even now, you are only saving a single lookup and bundling it may in fact be slower because you have a larger download that can't benefit from parallel downloads. With caching, there is probably no benefit either after the first opening of the site on a particular browser.

1 Like