# \[New Major Release\] node-red-contrib-uibuilder - v4.0.1

**URL:** <https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [18 July 2021 14:03 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547 "2021-07-18T14:03:10Z")\
**Posts on this page:** 5\
**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:** [18 July 2021 14:03 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547/1 "2021-07-18T14:03:10Z")

</div>

Well, finally it is here! Lots more fixes and code improvements so that we can keep the improvements coming.

A major release though because I'm afraid that there are a couple of potentially breaking changes.

The most important being that node.js v12 is now the minimum supported version. This is due to changes in upstream libraries.

The second most important is that I am now assuming that everyone is using a "modern" browser. That is one that supports ES6 (ECMA2015). Both the Editor code and the uibuilderfe make this assumption. As I've previously said, if this causes you an issue, please reach out and we can do something about it.

The other two big changes are:

## Template handling is significantly changed in this major release

New instances of uibuilder nodes will only be given the "blank" template which uses no front-end frameworks.

You can load a different template using the "Template Settings" in the Editor.

**Loading a new template WILL overwrite any files with the same name**. A warning is given though so even if you press the button, you can still back out.

You can choose from the following internal templates:

- _VueJS & bootstrap-vue_ - The previous default template.
- _Simple VueJS_ - A minimal VueJS example.
- _Blank_ - The new default.
- _External_ - See below.

**But** , you can now also chose an **EXTERNAL** template! 😀  
This will let you choose from [any remote location supported by **degit**](https://github.com/Rich-Harris/degit#basics). You can use `TotallyInformation/uib-template-test` as an example (on [GitHub](https://github.com/TotallyInformation/uib-template-test)).

**NOTE** : When using an external template, no check is currently done on dependencies, you must install these yourself. I will try to add this feature in the future.

## Changing the `uibRoot` folder

You can now set uibuilder's root folder - that stores configuration, common, security and each node's front-end code - to a different location.

The default location is in your userDir folder in a sub-folder called `uibuilder`. If you are using projects, the sub-folder will be in your projects root folder. This setting will change that.

See docs/changing-uibroot for more detail.

* * *

And the rest of the changes:

### Updated

- Update fs-extra to [v10](https://github.com/jprichardson/node-fs-extra/compare/9.1.0...10.0.0). No longer supports node.js v10, requires v12+.

- Make some class methods private in web.js and socket.js. Requires node.js v12 as a minimum as it uses an ECMA2018 feature.

- web.setup and socket.setup can only be called once.

- [Socket.IO](http://Socket.IO) updated from v2 to v4.

- Added Admin API check for whether a url has a matching instance root folder. (Was an outstanding to-do)

- Reworked the info block that is printed to the log on startup. Much neater and with added info on the webserver being used.

- Technical Docs have been improved in line with some other work I did recently on enterprise standards.

### New

- In the technical documentation, you can now access and search the main README as well as the current and archive changelogs (v1 & v2) in addition to everything else.

- `nodes/web.js` - Added web.isConfigured to allow a check to see whether web.setup has been called.

- `nodes/sockets.js` - Added socket.isConfigured to allow a check to see whether socket.setup has been called.

- Add a new icon to the main readme that allows editing of uibuilder code using VSCode either via a remote repository or via a Docker container.

### Fixed

- Node-RED edge-case for credentials was causing node to be marked as changed whenever "Done" button pressed even if no changes made. Turns out to be an issue if you don't give a password-type credential an actual value (e.g. leave it blank). Gave the `JWTsecret` a default value even when it isn't really needed.
- Instance details page - CSS now loads correctly even if using a customer server port. Some [Socket.IO](http://Socket.IO) details that were missing now returned.
- web.js - specifying a custom server port caused uibuilder to crash. Now fixed.
- Lots of tidying up of log messages, especially TRACE level.
- Accidentally include a node.js v14+ issue, now removed.
- Additional try/catch blocks to force better reporting if there is an error in the uibuilder module files.

---

<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:** [18 July 2021 15:39 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547/2 "2021-07-18T15:39:42Z")

</div>

And of course, the inevitable immediate bug-fix!

---

<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:** [18 July 2021 20:35 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547/3 "2021-07-18T20:35:38Z")

</div>

By the way, if you are playing along at home, you might like the fact that the next couple of features have been added to the main branch which is now labelled v4.1.0.

Still more to add to that I'm sure but:

### New

- Add drop-down to adv 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)

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [18 July 2021 21:43 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547/4 "2021-07-18T21:43:46Z")

</div>

All my (admittedly not very complex) uibuilder flows are working as expected.

Thank you for the work required to get this in play.

---

<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:** [18 July 2021 21:54 UTC](https://discourse.nodered.org/t/new-major-release-node-red-contrib-uibuilder-v4-0-1/48547/5 "2021-07-18T21:54:32Z")

</div>

Many thanks for the feedback, always helpful to know that things are working! 😀