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

Share Your Nodes
1

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.

New

  • 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.

Fixed

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

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

image
image909×629 36.5 KB

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

index.html

<html>
  <head>
    <title>Energy Monitoring</title>
  </head>
  <body>
    <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>
  </body>
</html>

app.js

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
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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, 
    router,
  //  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();
  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?

3

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.

4

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)

image
image1141×63 2.62 KB

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

5

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.

6

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

image
image1084×107 4.47 KB

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:

7

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