# Uibuilder: Getting Started Walkthrough

**URL:** <https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483>\
**Category:** FAQs\
**Tags:** uibuilder\
**Created:** [24 September 2021 16:10 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483 "2021-09-24T16:10:37Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [3 October 2021 20:32 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483/21 "2021-10-03T20:32:47Z")

</div>

> [@Mick](#):
>
> No nodes would double click and open the tab.

This seems to be a bug (happened a few times to me in 2.0.6). Will take a closer look the next time it occurs.

As for the walkthrough, thank you @TotallyInformation. We will ~~try to~~ use the uibuilder on our next project, which hopefully starts next week 🙃

---

<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:** [4 October 2021 08:48 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483/22 "2021-10-04T08:48:40Z")

</div>

> [@Mick](#):
>
> ```auto
> red.min.js:16 TypeError: Cannot convert undefined or null to object
> at Function.values (<anonymous>)
> at populateTemplateDropdown (<anonymous>:698:16)
> at Object.oneditprepare (<anonymous>:947:13)
> 
> ```

If you do get that again, could you click on the link and report the code lines it points to?

I _think_ that it is reporting that it can't access the Node-RED settings (`RED.settings`. THe `populateTemplateDropdown` accesses `RED.settings.uibuilderTemplates` which is a property passed back from the .js file via the options to `RED.nodes.registerType`.

I can't see anything else that might go wrong in that function as it is mostly jQuery.

* * *

I've put in a test for the next release in the `populateTemplateDropdown` function so that it outputs a suitable error if the setttings aren't accessible.

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [27 January 2022 14:41 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483/23 "2022-01-27T14:41:46Z")

</div>

> [@infinitesettings4](#):
>
> Main issue was that in the advanced template settings I had to change from src to dist.

Just a heads up for beginners following this guide to try and get started with uibuilder, when I made this change, it broke the page totally. I had to walk it back to get the vue template working again.

---

<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:** [27 January 2022 14:43 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483/24 "2022-01-27T14:43:08Z")

</div>

Are you using vNext or v4?

If using v4, you have to restart Node-RED to switch between src and dist. vNext (v5 as it will become) allows you to switch dynamically.

Either way though, you are responsible for putting something useful into the dist folder before use.

---

<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:** [11 April 2022 12:31 UTC](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483/25 "2022-04-11T12:31:20Z")

</div>

Please don't forget that the uibuilder documentation now includes a number of useful documents. Including the live version of the starter walkthrough.

- Using uibuilder
  - [A first-timers walkthough of using uibuilder](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/walkthrough1 "A first-timers walkthough of using uibuilder") - the updated version of this thread
  - [Creating data-driven web apps](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/web-app-workflow "Creating data-driven web apps")
  - [Configuring uibuilder nodes](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uib-node-configuration "Configuring uibuilder nodes")
  - [Configuring uibuilder](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uib-configuration "Configuring uibuilder")
  - [Changing the root folder (uibRoot)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/changing-uibroot "Changing the root folder (uibRoot)")
  - [uibuilder messages](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/pre-defined-msgs "Catalogue of messages and properties")
  - [How & why to use the sender node](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/sender-node "How & why to use the sender node")
  - [How to use the cache node](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/cache-node "How to use the cache node")
  - [How to use instance API's](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/instance-apis "How to use instance API's")

- Developing UI's
  - [The uibuilderfe library](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library "The uibuilderfe library")
  - [Creating Templates](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/creating-templates "Creating Templates")
  - [Browser auto-refresh](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/browser-refresh "Browser auto-refresh")
  - [Avoiding a build step](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-no-build "Avoiding a build step")
  - [Optimise & transpile (build)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-builds "Optimise & transpile (build)")
  - [Snowpack as build tool](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-build-snowpack "Snowpack as build tool")

- UI Frameworks
  - [VueJS complexities](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/vue-complexities "VueJS complexities")
  - [VueJS components](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/vue-component-handling "VueJS components")
  - [Svelte](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/svelte "Svelte")

- Security
  - [Securing uib web apps](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/security "Overview of general web app security with some specifics for Node-RED and uibuilder")
  - [Securing Data](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/securing-data "How to use flows and uibiulder middleware to secure your data")
  - [Securing apps using NGINX](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uib-security-nginx "How to use NGINX as a reverse proxy with TLS and identity authentication")

The documentation is available online (as above) but also from within the Node-RED Editor by clicking on the "Tech Docs" button in any uibuilder node.

Want more? Let me know!

Want to correct something? Let me know. 😉

[Previous page](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough/51483.md?page=1)