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

**URL:** <https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [22 July 2021 19:17 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789 "2021-07-22T19:17:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 July 2021 19:17 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/1 "2021-07-22T19:17:11Z")

</div>

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

[v4.1.0](https://flows.nodered.org/node/node-red-contrib-uibuilder) 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](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/147)

- Allow front-end code to update the `msg`. [#146](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/146)

### Fixed

- [#148](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/148) Editor node config cannot escape https check when not running in development mode

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 July 2021 22:28 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/2 "2021-07-22T22:28:19Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22a29f6ff744b9d124c2e5dd80eaba712f41e8e0.png)

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

**index.html**

```auto
<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**

```auto
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)

```javascript
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?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 July 2021 01:29 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/3 "2021-07-23T01:29:37Z")

</div>

Not had a chance to look in detail but one reason for getting 400 errors is a mismatched [Socket.IO](http://Socket.IO) client and server version. Are you sure that you have a v4 [socket.io](http://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.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [23 July 2021 01:40 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/4 "2021-07-23T01:40:21Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79240466cb28d4153740aeb879b6ab70dad2b4a5.png)

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 July 2021 08:45 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/5 "2021-07-23T08:45:10Z")

</div>

Right, that explains it then. That is the danger of packaging - perhaps you included uibuilderfe and [socket.io](http://socket.io) libraries in your build? uibuilder v4 jumped from [socket.io](http://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.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [23 July 2021 15:15 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/6 "2021-07-23T15:15:29Z")

</div>

> [@TotallyInformation](#):
>
> perhaps you included uibuilderfe and [socket.io](http://socket.io) libraries in your build?

`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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/23d5aedcac26d2839a7c4d5ac96008c70bffae01.png)

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 😉

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 July 2021 17:35 UTC](https://discourse.nodered.org/t/feature-release-node-red-contrib-uibuilder-v4-1-0/48789/7 "2021-07-23T17:35:03Z")

</div>

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.