# \[Update on progress\] node-red-contrib-uibuilder vNext/v5

**URL:** https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [23 January 2022 11:47 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088 "2022-01-23T11:47:01Z")
**Posts on this page:** 6
**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: [23 January 2022 11:47 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/1 "2022-01-23T11:47:01Z")

</div>

Hi all, trying to keep the pressure on myself to get v5 out the door. So posting a quick update on all of the changes so far. This is turning into a really major release and if you are already using uibuilder, I do recommend that you find some time to do at least some quick tests on the new version.

Assuming I can stop myself from doing any further innovations, there are only a few bits left now. A couple of fixes mostly. However, the vNext branch should be perfectly usable at the moment.

Install using:

```auto
cd ~/.node-red
npm install totallyinformation/node-red-contrib-uibuilder#vNext

```

* * *

CHANGELOG

**WARNING** : Though I've done some work on the security features, they are still not ready. Do please try them but **NOT IN PRODUCTION**.

### BREAKING

- **Clear client cookies** - You may get some odd results if you don't because cookie handling as been significantly reworked.

- **Installation of packages** for use in your front-end code has been **moved** from the `userDir` to `uibRoot`.

- **Peer installation of VueJS and bootstrap-vue yet again removed**. Since these now need to be in the `uibRoot` folder which  
we don't necessarily know at preinstall time.

- **Minimum Node.js version supported is now v12.20**. Minimum browser version remains the same and must be one that supports ES6.

### New

- **New node `uib-sender`** - this node allows you to send a msg to any uibuilder instance's connected front-end clients.

- **New node** `uib-cache` - this node allows you to cache input messages in various ways and recognises uibuilder's  
cache control messages so that a client browser (re)connecting to a web page will automatically get a copy of the cached pages.  
See the Tech Docs for details. An example flow is included in the uibuilder examples library.

- **New Feature** _Instance API's_. You can now define your own API's to support your front-end UI. These run as part of the Node-RED server and can be called  
from your UI, or indeed from anywhere with access to the Node-RED server's user endpoints.

- **Extended Feature** _Package Management_ - You can now install not only packages from [npmjs.com](http://npmjs.com) but also from GitHub and even local development packages. @scopes are fully supported and versions, tags, and branches are supported for both npmjs and GitHub installs.

- **New layout for the Editor panel**

- **Extended Feature** _Updated node status display_ - Any instance of uibuilder will now show additional information in the status. In addition to the existing text information, the status icon will be YELLOW if security is turned on (default is blue). In addition, if _Allow unauthorised msg traffic_ is on, the icon will show as a ring instead of a dot.

- **New Feature** - Added a version checker that allows uibuilder to notify users if a node instance must be updated due to a change of version.

- **Extended Feature** - Added uib version to the connect msg to clients and a warning in the client console if the client version not the same as the server.

- **Extended Feature** - Now allows [socket.io](http://socket.io) options to be specified via a new property in `settings.js` - `uibuilder.sioOptions`. See the [discussion here](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288/4). The Tech Docs have also been updated.

- If using a custom ExpressJS server for uibuilder, allow different https settings (key and cert files) from Node-RED itself. Uses a new property in `settings.js` - `uibuilder.https`.

- uibuilderfe library

### Changed

- Cookie handling has changed for the better. There are 3 cookies set by uibuilder: `uibuilder-namespace` (what [SockeT.IO](http://SockeT.IO) needs to communicate), `uibuilder-client-id` (see new features above), and `uibuilder-webRoot` (if you are using `httpNodeRoot` in settings.js). Each is set as a session cookie which means that if you close the window/tab showing your UI, the cookies are deleted. However, if you are being super-strict about EU and California law, you should inform your users that they exist. The cookies are limited to the exact path for the uibuilder instance they come from so there shouldn't be any cross-contamination. However, you should clear any old cookies when upgrading to uibuilder v5 from v4 or before.

- uibuilder nodes now show the url in angle-brackets. If the url is not defined, `<no url>` shows. If the node has a name, this is shown before the url. e.g. `My UI <myui>`. If you want to have the url show on a different line to the name, add `\n` to the end of the name.

- When adding a new uibuilder node, the url is now blank. This helps prevent accidentally creating two nodes with the same url which is confusing to recover from. As a blank url is not a valid configuration, the red triangle will show.

- When copying and pasting a uibuilder node, the pasted node(s) will have their URL changed to blank to prevent nodes with duplicate url's being deployed.

- Improvements to the "uibuilder details" page should make it easier to read. The data for ExpressJS Routes is much improved.

- Editor panel

- `uibuilderfe.js` client library updated to allow for the use of an `originator` metadata property. This facilitates routing of messages back to an alternative node instead of the main uibuilder node.

- Added documentation for [Socket.IO](http://Socket.IO) middleware and error handling.

- Minor improvements to the `.config` middleware templates.

- Improved logging for npm commands in library manager.

- Added client IP address to client connect & client disconnect control msgs

- Security improvements:

### Internal and development improvements

- Shared event handler implemented. This enables external nodes to send and receive data to/from uibuilder front-end clients.

- Gulp implemented

- New eslint rulesets implemented & config restructured. Along with the .html file decomposition, this makes for a much more accurate linting process.

- Massive number of minor code improvements to `uibuilder.html` and `uibuilder.js` & to the supporting libs and `uibuilderfe.js` thanks to the impoved linting.

- Removed deprecated functions.

- Remove old console.log statements used for testing and no longer required.

- Even more massive restructuring of `uibuilder.js`.

- Removed `inputHandler` function from `uiblib.js`. Code folded into the `inputMsgHandler` function in `uibuilder.js` which has been destructured so is small enough to have it as a single function.

- Package management rewritten. Should be faster and uses async/Promise functions.

- Editor changes

- v3 admin API changes

- v2 admin API changes

- `web.js` changes

### Fixed

- URL validation should now work as expected for all edge-cases.
- Fixed the problem that required a restart of Node-RED to switch between `src` and `dist` folder serving.
- Fixed Issue [#159](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/159) where sioMiddlware.js wasn't working due to the move to [Socket.Io](http://Socket.Io) v4.
- Fix issue reported in Discource of an error in masterMiddleware when setting headings. Corrected heading syntax for ExpressJS v4.
- Client connect and disconnect msgs not being sent to uibuilder control port (#2). NOTE: As of [Socket.io](http://Socket.io) v4, it appears as though the disconnect event is received _after_ the connect when a client is reconnecting. You cannot rely on the order.
- Fixed CORS problems after move to [Socket.IO](http://Socket.IO) v4. (NB: CORS is defaulted to allow requests from ANY source, override with the `uibuilder.sioOptions` overrides available in settings.js).
- `uiblib.js` `logon()` - Fixed error that prevented logon from actually working due to misnamed JWT property.
- A number of hard to spot bugs in `uibuilder.html` thanks to better linting & disaggregation into component parts
- In `uibuilderfe.js`, security was being turned on even if the server set it to false.
- Fixed an issue when removing uibuilder nodes caused by the move to [socket.io](http://socket.io) v4. Should fix the failure to remove unused uib instance root folders and fix renaming problems as well.
- URL rename failed if user updates template before committing url change. This is now blocked.
- File editor failed if the node hadn't been deployed yet. Blocked if instance folder hasn't yet been created.
- Change degit call to turn off cache which was producing a `could not find commit hash for HEAD` error. See [degit Issue #37](https://github.com/Rich-Harris/degit/issues/37). Partial fix for [Issue #155](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/155).
- If deleting a node that hasn't been deployed, a delete folder warning is given - add check to see if the folder actually exists before giving the error.
- If using Node-RED Docker with recommended install, uib couldn't find the [Socket.IO](http://Socket.IO) client folder to serve. [Issue](https://discourse.nodered.org/t/uibuilder-the-next-step-3rd-party-comms-with-a-uibuilder-front-end/51684/19). Extra check and cleared warnings added.
- Spurious instance folder rename when it wasn't needed.
- Bad cookie handling!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 January 2022 13:23 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/2 "2022-01-23T13:23:51Z")

</div>

Absolutely fantastic work Julian. 🎉👏

I must make time to test out the updates.

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [16 February 2022 14:47 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/3 "2022-02-16T14:47:54Z")

</div>

Totally agree with Steve on those sentiments! Cheers!

From looking at the vnext code, it appears there are some new configurations available in `settings.js`, too? Where can I find an example of what goes into the new `uibuilder` section, especially around the `customServer` settings?

---

<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: [16 February 2022 16:49 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/4 "2022-02-16T16:49:45Z")

</div>

Ah, well maybe you haven't perused the updated Tech Docs? If you have vNext installed, open the link to the Tech Docs and you will find loads of new information including the new `uib-configuration` page. 😀

Oops, though I've just noticed it is missing some stuff - ah well, I'll add that now - in the meantime, here is the annotated version:

```nohighlight
   /** Custom settings for all uibuilder node instances */
   uibuilder: {
        /** Optional HTTP PORT. 
         * If set and different to Node-RED's uiPort, uibuilder will create
         * a separate webserver for its own use.
         */
        //port: process.env.UIBPORT || 3001,

        /** Optional: Change location of uibRoot
         * If set, instead of something like `~/.node-red/uibuilder`, the uibRoot folder can be anywhere you like.
         */
        uibRoot: process.env.UIBROOT || '/src/uibRoot', //path.join(os.homedir(), 'myuibroot')',
        
        /** Only used if a custom ExpressJS server in use (see port above)
         * Optional: Default will be the same as Node-RED. @type {('http'|'https')} 
         */
        customType: 'http',
        
        /** Only required if type is https, http2. Defines the cert & key. See Node-RED https settings for more details.
         * @type {Object<Buffer,Buffer>}
         */
        // https: {
        // key: 'keyname.key',
        // cert: 'fullchain.cer'
        // },
        
        /** Optional: Socket.IO Server Options. See https://socket.io/docs/v4/server-options/
         * Note that the `path` property will be ignored, it is set by uibuilder itself.
         * You can set anything else though you might break uibuilder unless you know what you are doing.
         * @type {Object}
         */
        // sioOptions: {
        // // Make the default buffer larger (default=1MB)
        // maxHttpBufferSize: 1e8 // 100 MB
        // },

        /** Controls whether the uibuilder instance API feature is enabled
         * Off by default since uncontrolled instance api's are a security and 
         * operational risk. Use with caution.
         */
        instanceApiAllowed: true,
   },

```

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [17 February 2022 13:28 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/5 "2022-02-17T13:28:53Z")

</div>

Aha, although I did see the TechDocs (very nice, btw!) I did NOT notice that my  
`uibuilder: { ... }` settings were incorrectly placed at the end of settings.js,  
inside the `editorTheme: { ... }` section -- D'oh! 🤦‍♂️

So I guess you can buy me a beer for discovering another negative test? Hahahaha 😉  
Seems the initialization steps get confused if there is NO `uibuilder` section found...

---

<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: [17 February 2022 20:18 UTC](https://discourse.nodered.org/t/update-on-progress-node-red-contrib-uibuilder-vnext-v5/57088/6 "2022-02-17T20:18:36Z")

</div>

> [@shrickus](#):
>
> Seems the initialization steps get confused if there is NO `uibuilder` section found...

Oh drat, that shouldn't happen! Thanks. I'll check that out. I did make a last minute change to move most of the processing for that all to one place from the multiple places it had ended up previously.

> [@shrickus](#):
>
> So I guess you can buy me a beer for discovering another negative test? Hahahaha

Honestly, I'd be more than happy to buy you a beer if we ever meet IRL - you can get the 2nd round in 😀🍻
