Getting Started

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. See the Basic JQuery app page for more details.

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 (Note that this won't exist until you've added a uibuilder node to your Node-RED flow and clicked on the deploy button). 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.

The default files, index.html, index.css and index.js should have been copied over from a master template folder so you can get going straight away.

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
    }

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

Then you need to install the npm module for any packages you've added. In this example, from a command line on the Node-RED server, make sure you are in the folder ~/.node-red and then issue the command npm install riot.

Now you need to restart Node-RED so that the new settings and package are recognised.

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.

Note: As always, ~/.node-red is shorthand for the folder containing the "userDir" for the user running Node-RED. This may be different if you have changed it in the startup command for running Node-RED.

Now you know the basics and should have a working example. There are a number of different examples in this WIKI. These will help you explore some popular, lightweight, front-end libraries such as MoonJS and Riot. They will also give you an insight to some of the things you need to deal with and how to do so.

The How To pages in this WIKI cover a number of specific challenges such as making sure new/reloaded client connections get a basic set of data from the server, creating a mobile browser app, sending messages from Node-RED to a specific client and so on.