# \[New Release\] node-red-contrib-uibuilder - v3.1.3

**URL:** <https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277>\
**Category:** Share Your Nodes\
**Created:** [17 January 2021 17:48 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277 "2021-01-17T17:48:27Z")\
**Posts on this page:** 20\
**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:** [17 January 2021 17:48 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/1 "2021-01-17T17:48:27Z")

</div>

UPDATE 2021-01-19: Please note that due to problems with npm, uibuilder no longer installs `vue` and `bootstrap-vue` for you. You need to install these yourself now as of v3.1.3.

```bash
#cd <userDir>
npm install vue@"2.*" bootstrap-vue@"2.*"

```

I will try to find a way to install these or at least prompt you from within Node-RED in some future update.

npm is hopelessly broken in this respect and there doesn't appear to be any safe way to call `npm install` from inside an npm install preinstall or postinstall script.

* * *

Hi all, I am pleased to announce another release of uibuilder. This time it is both a feature release as well as a bug fix.

If you make use of the file editor in uibuilder, you will certainly enjoy this release.

You can now manage any folders and files within your instances root folder. Create and delete folders and files to any depth. You get better notifications about what happened as well.

There is a new per-instance information page that should be a lot easier to read than the existing details page. Great for working out all those URL's and folder locations or other issues.

You now also have direct access to the technical docs. These have long been part of the npm package but they are now exposed as a new web app.

Of course, more bugs have been squished and there has been another round of code rationalisation. Including starting to move to a better API structure that is more consistent with fewer endpoints. That part is a work in progress.

Lots more to do of course but the release of the v3 branch made it possible to push forward much faster (if time permits!). Check out the [To Do list in the WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/To-Do) along with [project](https://github.com/TotallyInformation/node-red-contrib-uibuilder/projects/1), [milestone](https://github.com/TotallyInformation/node-red-contrib-uibuilder/milestones) and [issue](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues) pages if you want to see where things are headed.

* * *

## Changelog

### Fixed

- [Issue #106](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/106) Editor: When editing files, a filename with a leading dot did not set the filetype correctly.

- [Issue #105](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/105) Editor: Attempting to edit a hidden file (with a leading dot) resulted in an error and white screen.

### New

- [Issue #108](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/108) You can now view the uibuilder package docs (the ones in this package) by going to the url `<node-red-editor-url>/uibuilder/techdocs`.

- The config editor has a new button Instance Details. clicking the button will show a new page in a new tab. The page contains debug details of the exact settings for the uibuilder instance. This should help people better understand all of the settings including folders and urls.

### Changed

#### Editor, "Edit Source Files" improvements:

- **ALL** folders and files within the `<uibRoot>/<url>` folder can now be edited.

- Soft- or Hard-linked folders and files can now be used. This lets you put your front-end resources wherever you like as long as you create a soft or hard link into the `<uibRoot>/<url>` folder.

- Added better information toasts on file create/delete actions.

- Made keyboard enter button do the default action in the create dialog windows.

- Added more information to the create/delete dialog windows. (url, folder name, file name)

- [Issue #102](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/102) Relaxed the file-type checks when editing files. Allows for use of more ACE file-types and prepares the way for the introduction of the Monaco editor in Node-RED v2.

- [Issue #107](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/107) Allowed the selection of any folder or sub-folders in the file editor.

- [Issue #109](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/109) Persist the selection of folder and file when editing.

- Improved display when no file is available to edit or if the file cannot be opened.

- Started moving to new v3 admin API's that are more consistent with less overheads.

- Changed "Edit Source Files" button to say "Edit Files". Recognising the additional capabilities.

- Changed button link names in the configuration panel to clarify and accommodate the 2 extra buttons for the instance details and technical docs links.

#### uibuilder.js:

- Started to simplify and rationalise API checks and reporting. Deprecated `/uibfiles`, `/uibnewfile`, `/uibdeletefile` API's, replaced with new v3 admin API `/uibuilder/admin/:url`. Simplifies the admin API's, makes them more consistent and reduces the number of URL's.
- Added v3 admin API's to create new and delete files and folders
- Added `/uibuilder/instance/<url>` admin API. Is created for each instance. Calling it will show a detailed information page for the given uibuilder instance.

#### Other

- Updated dependencies
- Installer: Improved the post-install console message (Post Install takes a while). Also forces VueJS to v2.x (not v3 as yet which will soon be the latest version because there are currently too many breaking changes).

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 19:32 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/2 "2021-01-17T19:32:22Z")

</div>

Just updated to 3.1.0

I use NodeRed 1.2.7 and NodeJS 14.15.4  
On Windows 7 and 10, all seems to be OK.

But I have some issue on Amazon Linux EC2.  
Some info :

- uibuilder launch and work OK
- **Open/widget** and **Tech Dos** is OK
- **uibuilder details** and **Instance Detail** s go to new page with "Unauthorized"
- same issue with NodeJS v12.20.1 and v14.15.4
- if I click **Edit Files** I get this  
 ![Uibuilder](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c45a713edfb0be46431ce7b5fb9eea6a85897ac.png)

---

<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 January 2021 19:49 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/3 "2021-01-17T19:49:31Z")

</div>

Did you deploy the node instance before editing?

Also, can you check whether ~/.node-red/uibuilder exists?

> [@softy2k](#):
>
> **uibuilder details** and **Instance Detail** s go to new page with "Unauthorized"

Do you have a user login set up for your node-red Editor?

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 20:02 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/4 "2021-01-17T20:02:02Z")

</div>

> _an you check whether ~/.node-red/uibuilder exists?_  
> Exists. If I click **Open/widget** , demo page is opening OK

> _Do you have a user login set up for your node-red Editor?_  
> Yes, I have on Linux. I don`t have on Windows

---

<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 January 2021 20:07 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/5 "2021-01-17T20:07:13Z")

</div>

OK, then everything relates to the same issue.

uibuilder secures its admin endpoints with `uibuilder.read` or `uibuilder.write` permissions. You need to make sure that your Editor user ids either have these permissions explicitly or that they have '\*' permissions (everything).

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 20:10 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/6 "2021-01-17T20:10:36Z")

</div>

In settings.js I have :

> adminAuth: {  
> type: "credentials",  
> users: [{  
> username: "admin",  
> password: "xxxxxxx",  
> permissions: "\*"  
> }]  
> },

---

<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 January 2021 20:23 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/7 "2021-01-17T20:23:25Z")

</div>

I think we've seen this before. I don't think that the permissions work as described in the docs.

Permissions of '\*' should give all permissions but they clearly don't. However, they DO work if you set the default to that permission. Just not if you set it for a user.

Let me do some more experiments. I'll come back in a bit.

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 20:37 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/8 "2021-01-17T20:37:05Z")

</div>

Just for test, I remove **adminAuth** in **settings.js** and issue is "solved"

---

<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 January 2021 20:38 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/9 "2021-01-17T20:38:14Z")

</div>

Right, after further tests **NONE OF THE PERMISSIONS WORK** at user level.

So I am going to do an emergency release to remove the permissions.

Unfortunately, this means that it will not be possible to prevent someone who has admin access from making changes to files and folders.

I tried replacing my custom permissions with 'read' and 'write' then tried clean logins from various different users with different permissions and none of them worked.

This is supposed to work in a custom node:

```auto
RED.httpAdmin.get('/uibgetfile', RED.auth.needsPermission('read'), function(req,res) {
    // .....
})

```

But it doesn't.

> [@softy2k](#):
>
> Just for test, I remove **adminAuth** in **setting.js** and issue is "solved"

That is correct but you don't want to do that on an Internet connected version.

I am just doing an emergency change, it will be live in 10 or 15 minutes. You will then be able to use users but there will be no differentiation between read and write permissions.

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 20:43 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/10 "2021-01-17T20:43:25Z")

</div>

> You will then be able to use users but there will be no differentiation between read and write permissions

In my case it would be no problem. I only have one user (admin)

---

<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 January 2021 20:43 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/11 "2021-01-17T20:43:53Z")

</div>

OK v3.1.1 is live, please update so that you can use users with the Editor.

---

<div class="post-metadata">

**Author:** ![softy2k](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/softy2k/32/23707_2.png) [@softy2k](https://discourse.nodered.org/u/softy2k)\
**Post date:** [17 January 2021 20:56 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/12 "2021-01-17T20:56:23Z")

</div>

Thanks, issue solved

---

<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 January 2021 23:08 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/13 "2021-01-18T23:08:13Z")

</div>

A quick note that there appears to be something odd happening to the uibuilder install if you are using Windows. But only where Windows is using the cmd shell not if you use PowerShell.

If you are running Node-RED on Windows, you should, I think, change your default shell to PowerShell so that Node-RED will use it rather than cmd when it installs nodes from the palette manager.

I am still investigating what is going on but it appears to be some kind of issue with npm.

* * *

Fresh install of Node-RED and uibuilder on Windows 10 (latest) with Node.js v14.15.0 and npm v6.14.11

I think I might have found an issue but I've no idea what is causing it. If I install everything using PowerShell, it all works fine. If I install using the "Node.js command prompt", npm fails to install the uibuilder dependencies.

* * *

So not just the node.js command prompt but command prompt in general. Here are two lists of the `userDir/node_modules` folder - the first after the uibuilder install but before the post install. The second after the post install.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f7e026b155a68af32548073c5e9db77debf698d.png)

When I install uibuilder using PowerShell, this is the result (before and after again):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/752bf96035fe64ea21c0e2dafd3db6b8af9a2ab2.png)

As you can see, a totally different result. In the PowerShell case, the rest of the dependencies are installed in `userDir/node_modules/node-red-contrib-uibuilder/node_modules` instead of in the parent node\_modules and it all works.

---

<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:** [19 January 2021 13:44 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/14 "2021-01-19T13:44:16Z")

</div>

Just to say that the same problem happens when installing on Linux as well.

[Installation bug · Issue #110 · TotallyInformation/node-red-contrib-uibuilder (github.com)](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/110)

I am investigating the cause and will find a fix. Expect 3.1.2 along - hopefully soon.

---

<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:** [19 January 2021 21:24 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/15 "2021-01-19T21:24:38Z")

</div>

Please see the update in the first post. v3.1.3 has now been published. Fixes Issue #110

---

<div class="post-metadata">

**Author:** ![Roaders](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roaders/32/11282_2.png) [@Roaders](https://discourse.nodered.org/u/Roaders)\
**Post date:** [24 January 2021 09:45 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/16 "2021-01-24T09:45:11Z")

</div>

(not read the whole thread apologies if this has been discussed)  
What issues are you having with mom? Surely just a normal dependency will install the transient dependencies when your nose is installed?

---

<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:** [24 January 2021 13:58 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/17 "2021-01-24T13:58:41Z")

</div>

I think something got lost in translation from your last post 😄

The issue with npm is that when you use a pre-install script (or post-install) from your package.json that tries to use npm to install another package, the whole thing blows up badly. Either the thing you are trying to originally install isn't or the thing that the pre/post-install script is installing doesn't get installed.

So far, I have found no workable way to automatically install a 2nd package while installing the 1st while both are installed at the same level

Please to take a look at the pre-install script that is still there in uibuilder v3.1.3, you will see the code I was trying to run in a function that I put in just to stop it running.

Please let me know if you find any reliable way to do this. What I'm trying to achieve is for Vue and bootstrap-vue to be installed into the same level (your Node-RED userDir) as uibuilder at the time you install uibuilder.

---

<div class="post-metadata">

**Author:** ![Roaders](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/roaders/32/11282_2.png) [@Roaders](https://discourse.nodered.org/u/Roaders)\
**Post date:** [24 January 2021 15:13 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/18 "2021-01-24T15:13:31Z")

</div>

I am pretty good with npm so I feel relatively confident that we can sort this.  
First off why is this done as an install script rather than just having them installed as transient dependencies so they get installed automatically?  
Also what do you mean by installed at the same level? For a long time npm has flattened the dependency tree so that everything is at the same level (except for incompatible transient dependencies which are installed in a tree).  
Lastly I would ask why do you care where these dependencies are installed? To resolve the location of a dependency I would use `request.resolve("vue-or-whatever`)` which will tell you where it is whatever structure npm has chosen.

I have no idea how this package works and have not used it so talk to me like I'm an idiot. I apologise if I'm asking obvious stupid questions but I have no background on why or what you're trying to do. 🙂

---

<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:** [24 January 2021 15:29 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/19 "2021-01-24T15:29:17Z")

</div>

> [@Roaders](#):
>
> I am pretty good with npm so I feel relatively confident that we can sort this.

Cool!

> [@Roaders](#):
>
> First off why is this done as an install script rather than just having them installed as transient dependencies so they get installed automatically?

Originally, they were installed as standard dependencies of uibuilder. However, not everyone wants to use Vue or bootstrap-vue. Unfortunately, when installed this way, uibuilder had no way of letting you uninstall them safely since they were built into the package.json file of uibuilder. So then I tried to move them to be peer dependencies. But in all honesty, they are not actually peer dependencies of uibuilder, they are dependencies of your userDir in Node-RED.

So the requirement is to be able to, while installing uibuilder, also install vue and bootstrap-vue in such a way that they end up in the package.json file of your userDir. That way, they can be uninstalled by someone with access to the Node-RED editor.

> [@Roaders](#):
>
> For a long time npm has flattened the dependency tree so that everything is at the same level (except for incompatible transient dependencies which are installed in a tree).

That is almost but not quite true. Try installing something from a local folder on Windows.

> [@Roaders](#):
>
> Lastly I would ask why do you care where these dependencies are installed?

As explained, if you install them as dependencies of uibuilder, you can't safely uninstall them. They have to be dependencies of your userDir folder.

That is independent of whether npm flattens the structure or not. It is dependent on which package.json file they end up in.

> [@Roaders](#):
>
> `request.resolve("vue-or-whatever` )`

Which also doesn't always work as expected as I found out to my cost when building the package manager feature in uibuilder. Resolve only works if the package defines a "main" script. Not all front-end libraries actually do that. So it is not safe to assume that you can actually resolve a package. There also used to be some problems with resolution when installing local folders as packages though they seem to be fixed now.

> [@Roaders](#):
>
> I have no idea how this package works and have not used it so talk to me like I'm an idiot. I apologise if I'm asking obvious stupid questions but I have no background on why or what you're trying to do

Not at all, I'd love to have someone else take a look at things. I am not a full-time developer so I may well have overlooked something obvious.

Just to recap the requirements:

- uibuilder provides a default template when installed. That template uses Vue and bootstrap-vue. Those are front-end libraries, they are not needed by Node-RED. It is preferred therefore that installing uibuilder also installs those packages. This is less confusing for users without web development experience.
- Vue and bootstrap-vue need to end up in the dependencies section of the `~/.node-red/package.json` file so that, if they are not needed for a particular installation, they can be removed using uibuilder's built-in package manager (or from the command line of course).

Thanks for looking at this.

---

<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:** [24 January 2021 15:35 UTC](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277/20 "2021-01-24T15:35:29Z")

</div>

> [@Roaders](#):
>
> I would use `request.resolve("vue-or-whatever` )` which will tell you where it is whatever structure npm has chosen.

For interest, this is the code that I use to give me a better chance at actually finding the folder for a package so that I can add that folder to a `serveStatic` function which makes it available to your front-end as `./uibuilder/vendor/.....`

[https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/nodes/tilib.js#L123-L203](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/nodes/tilib.js#L123-L203)

[Next page](https://discourse.nodered.org/t/new-release-node-red-contrib-uibuilder-v3-1-3/39277.md?page=2)