The most common reason that you are not getting any communications between Node-RED and a UIBUILDER served webpage is that you haven't loaded the uibuilder client script library.
Other occasional issues are because you are loading script libraries in the wrong order. This can be a misunderstanding about the defer
script attribute.
Here is the default "blank" template index.html file that uibuilder provides:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Blank template - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Blank template">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
<!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script> -->
<!-- #endregion -->
</head><body class="uib">
<h1 class="with-subtitle">Blank Template</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
</body></html>
Notice the script
line in the head
section. This follows current web development best practice which is to put your scripts in the head but to use defer
which causes them to load AFTER the rest of the page. So it is similar to the oft-repeated and out outdated recommendation of putting scripts at the END of your body section.
But which ever way you choose to load things, the uibuilder library MUST be loaded on EVERY page. Without it, you simply have a static page and no connection to/from Node-RED.
Under the skin, the uibuilder client script library has the socket.io
client library embedded within it so you don't have to load it yourself.
Also note that the uibuilder client script library is already minified and correctly wrapped either for direct loading in a script tag (the so-called iife
version) or for loading ES Module style in your own JavaScript module file (esm
version). In both cases, the files self-execute and add the uibuilder
(alias uib
) library module to the global context. That startup execution also builds the core configuration and creates the link back to Node-RED over socket.io
which will use websockets if it can and fall back to long polling if it can't.