I found this nice Vue admin template, I was wonder how can I add a few uibuilder pages to this template ...
You will see from the github README that it requires a build stage. This is perfectly possible to do and the WIKI has some basic instructions.
Thanks
Or should I create multiple uibuilder nodes for buttons, status n events and link them together using link or other means ???
Nope, no need for that. Really, the uibuilder node controls a folder of front-end code plus a dedicated socket. Well, there's managing the web server as well of course and some API's.
The right way to do it is to have a link-in node attached to your uibuilder flow and then use as many link-out nodes as you like to send data to it.
Unlike Dashboard, you build your front-end code (buttons, etc) as front-end code, you don't typically send it from the server - though there is a little facility for that but personally, I don't recommend it. Instead leverage the capabilities of npm packages to package up components and use uibuilder's package management feature to install them. That way they are made available via the web server and you get to decide whether you want to include them in a page.
I'm currently trying to find time to build an example with some useful nodes in it such as the SVG bulb component I've previously posted about in this forum. Sadly, time seems to be accelerating away from me at the moment! If you want to see how far I've got so far, have a look on my GitHub.
Hi guys,
I would like first to thank you, this post fits perfectly what I need to work on.
I am pretty new to Node-RED, but I found it really interesting and useful for my work, especially regarding uibuilder node.
My first idea was to use my existing template code in the uibuilder node. Unfortunately, it is made with HTML5, CSS and PHP languages. Reading through the web I understood that is not possible to integrate PHP in uibuilder, then I moved to Vue solution (in case of misunderstanding from my side, please let me know). In any case, also finding the solution to use my old code, I would like to move on to Vue duo its plus.
In any case, I am interested to start using a template like on https://www.creative-tim.com/product/vue-black-dashboard-pro. I download the Vue Dashboard and I built it in /src folder. Right now it is available in my localhost:8080, but I would like to access it through uibulder node on localhost:1880, in order to share the variables and function between front-end and back-end.
Reading uibulder I understood the I always need index html | css | js. How could I merge it with the Vue template I want to use?
Thank you in advance.
PHP is a server-side language the same as Node-RED, not a client-side (front-end) language like JavaScript.
It is certainly possible to make use of PHP though in conjunction with Node-RED but really you should be comparing what PHP does with what Node-RED itself does.
It is possible with uibuilder to serve up your uibuilder pages from PHP, but it isn't particularly well tested and you need to jump through a couple of hoops. The main thing to note is that you have to call uibuilder.start with some parameters that tell the uibuildefe library how to work with the websocket connection that is provided from Node-RED by the uibuilder node itself. This is documented.
Vue is a front-end framework, PHP is a back-end server. uibuilder is generally based off Node-RED for the back-end and can use any framework, or indeed no framework at all, for the front-end. The uibuilderfe library has a couple of Vue specific helpers but is otherwise independent. The node-red-contrib-uibuilder package does ask you to install VueJS and bootstrap-vue as packages but this is purely to support the default front-end template.
The important thing to remember is that Node-RED and PHP are two different back-end servers. Your front end can be using any or no front-end library (Vue, REACT, Angular, Moon, jQuery, ...).
Currently, uibuilder needs to have an index.html file as that is how it works out whether to serve your files from the src or dist sub-folders of your uibuilder instance. Typically, if you need a build step which I assume that dashboard layout does, you would adjust your build tool to output to the dist sub-folder rather than src. Unfortunately, you currently need to restart Node-RED to swap between the two sub-folders. If an index.html file exists in the dist folder, that will be used. Otherwise the src folder will be used.
index.html is used because that is the default file when using the node.js based ExpressJS web server (PHP is its own web server but node.js works somewhat differently). If you don't give a specific file name in your url, the index.html file is used automatically. If you don't ever use a url without a filename (e.g. http://myhost:1880/some/path/) then you can leave just a stub index.html file but I don't really recommend it as it can be confusing.
The index.css and index.js files are a convenience only, since your index.html file actually specifies what other files are loaded. You can call them whatever you like. Just note that you will want to turn off the flag in uibuilder's advanced settings that copies the default template files otherwise it will keep putting the default index files back which might be a little annoying for you 
Hope this clarifies a few things for you.
Regards, J.
1 Like
Thank you @TotallyInformation, I needed this kind of clarification. I still have a lot of questions, but firstly I prefer to keep going reading the documentation and try to let it work. After that, I will probably look for some more clarification.
Anyway, I'm trying to add javascript functions to my html | css code and it works perfectly. Until now I am able to send out information, from the uibuilder node, through the uibuilder.send() function. Should I use uibuilder.onChange() to send information to uibuilder node? Do you have some advice or specific documentation to share?
Thank you again.
S.
Always nice to have someone read the documentation you've spent time on 
Let me know what isn't clear or might be missing or outright wrong. Always good to get fresh eyes on it.
Probably not though you could if you wanted to. Mostly, you will use the onChange function to process inbound messages from Node-RED, updating browser (Vue in your case) variables as needed. onChange gives you an easy-to-use function that runs every time you input a message to your uibuilder node in Node-RED. It is kind of the opposite to the send function.
There is a LOT of information in the WIKI under various subject headings. That is the best place to look for a how-to. There are also some uibuilder specific flows in the Node-RED flows library, there is also a uibuilder collection which I occasionally update if I see something related to uibuilder. There is some useful info in the forum as well but that can be harder to tease out.
Then there is the newer "technical documentation". This exists in the uibuilder package and is viewable both online (thanks to GitHub pages) and from within Node-RED:
