This is the first in an occasional series of FAQ's about node-red-contrib-uibuilder.
uibuilder supports serving many pages from a single node.
The default page is index.html and this is what is linked to from the nodes config panel. Something like http://localhost:1880/myuiburl/. You could also use http://localhost:1880/myuiburl/index.html.
Create any number of other *.html pages in the same folder as index.html and they are all accessible from the same url pattern, e.g. http://localhost:1880/myuiburl/page2.html.
Each page can share the same index.js file if that works for you or it can have its own .js file. In each case, the uibuilder.start() function has to be called to get uibuilder working. Given the improvements in the front end library, you might not even need a separate .js file now but rather embed the script directly into the html file.
Note that ALL pages will receive ALL the general messages from the uibuilder node. So you will need to use the msg.topic or some other data to recognise data for a specific page if that is what you need. Similarly, you might want to add a specific property to any outgoing msgs so that your Node-RED flow can differentiate between msgs from different pages (if that is needed, you might not need to). Obviously, some messages from Node-RED may contain a specific msg._socketId which directs the msg to a specific browser tab.
If you wish to put pages in a sub-folder, things were slightly more complex before v5.0.2. In this case, the uibuilder FE library isn't able to work out the correct namespace and path to the Socket.IO client. So in that case, you have to provide the required parameters to the uibuilder.start() function. Please see the Tech Docs for details.
However, from v5.0.2 onwards, as long as you allow cookies, the front-end client library can work everything out for itself.
There is still another change you will need if accessing pages in a sub-folder though - if you are using the recommended relative URL's in your HTML. In that case, all of the URL's need an extra ../ at the start so that they are correct. Add more of those the deeper you nest your code files. If you are using absolute URL's, everything will still work with no changes.
One last hint. If you need to know uibuilder's various url and socket.io paths and namespaces for yourself. You can easily access them in your own code with uibuilder.get('cookies'). This returns 3 cookies of interest:
{
// The Socket.IO namespace
"uibuilder-namespace": "components-html",
// The Node-RED httpNodeRoot setting as this has to
// be added to the start of all URL paths
"uibuilder-webRoot": "",
// A session-persistent, unique client-id for the browser tab in use
"uibuilder-client-id": "FU9t5iebm1zTQrt0QK4F0"
}
Hope this is of interest. If it is, please add some comments about what FAQ's you'd like to see in the future. Thanks, Julian.
