Home

Confused? Don't worry, that is my poor writing style not you!

This library makes it very easy to create any number of different web pages from Node-RED. Each of those pages can use and front-end (e.g. client/browser) design and code you like and you can easily add front-end libraries using the node. Or, for simple things, just use JQuery to dynamically display information passed from Node-RED.

---

When you install this node and add it to a flow, you get a new web page created. By default, that is at the url /uibuilder.

The page that is created looks pretty naff. But it is illustrating quite a lot. Mainly that you get access to messages sent from Node-RED and can send messages back as well. You don't need to reload the page to see those messages. But you do need to do something to make those messages appear on the page.

If you haven't made any changes, open up your browser's developer console by pressing key F12. Look for the "console" and you will see the message objects listed along with some other information that lets you know what is happening.

Of course, the default page isn't much use to you so you now need to start creating your own page.

To do that, you need access to the userDir folder of your Node-RED server. This is usually found at ~/.node-red (NB: that ~ is a shortcut to your user's home folder, this works on all platforms, even Windows if you are using PowerShell rather than the CMD shell). If it isn't there, you will have to find out how Node-RED was started and what userDir folder was specified.

Once there, look for the uibuilder folder. In there you will find another sub-folder that matches the url you chose in the node instance - uibuilder again by default. There you will find yet another level of folders dist and src. For now you want the src folder and that is where you need to start creating your own resource files that will appear in the browser.

You might want to start by copying one or more of the default files. You should be able to find these at ~/.node-red/node_modules/node-red-contrib-uibuilder/nodes/src.

Now you can make changes to those files in your local copy.

As you progress, you might find that you want to play with some additional front-end libraries like RiotJS, Vue or REACT. This is possible too. All you need to do is go to ~\.node-red\settings.js and add the following to your Node-RED settings:

    uibuilder: {
        userVendorPackages: ['riot'],
        debug: false
    }

Then restart Node-RED. Don't forget to add a comma after the previous settings otherwise Node-RED will fail to start.

Obviously, change the list of packages to your own requirements. The names must match the install names of the npm modules and you have to install those yourself before restarting Node-RED. If you forget to install the modules or restart, the log will tell you what command you need to run.

The debug setting lets you get at detailed logs of what is happening when you use uibuilder. A log file is created at ~/.node-red/uibuilder.log.