Run uibuilder standalone?

First of all - thank you everyone for your impressive work on uibuilder and node-red!

I have a question - is it possible to run uibuilder and node-red separately?
Reason I ask is that I am currently using a vue "template" as starting point for my ui ( and normally to do dev i just run "npm run dev" but I cannot get that to work when using uibuilder. Just placeing the source files in "/src" folder of my uibuilder instance do not work either. Only thing that works for me is to do a build so that node red use files from the "/dist" folder.
So what I want to accomplish is a easier way to do development of the front end.

Any help is much appreciated.

Cant you just do your webdev as normal & upon build, transmit it to the dist folder?

Whats the issue?

also, have you read the most excellent and extensive info around this subject on the ui-builder wiki?

It is possible to run uibuilder front-end code from a different web server - though not well tested. You have to change the parameters on the uibuilder.start function so that the uibuilderfe library can find and communicate with the Node-RED back-end. It is in the docs.

One of the slightly annoying "features" of uibuilder at the moment is that only one of src or dist can be used and you have to restart Node-RED to change. Something I hope to improve in the future.

However, my experiments with Svelte showed that it is perfectly possible to have your build process such that any changes to the front-end files trigger an instance rebuild (to dist). With Svelte, the dev build server clearly has a link to the front-end because as soon as Svelte has rebuilt, it automatically triggers any clients to reload the page - even the ones served up by Node-RED - neat. Not sure if other dev build servers work in the same way.

Worse case scenario is that your dev build process runs and you have to reload the page manually.

Either way though, as long as your dev build is watching the src folder for changes and outputting to the dist folder, it will all just work. Just make sure that you have an index.html file in the dist folder and have restarted Node-RED after setting that up.

Incidentally, if - for some reason - you can't change your build process to use those folders, just use linked folders. Soft-links from your actual output folder to dist works absolutely fine.

Haha, thanks for that. But also don't forget the online technical docs that you now get with v3.2+ These are linked right from within uibuilder in the Node-RED editor and contain even more detailed information.

1 Like

Thank you so much for the reply @TotallyInformation.
I will probably start out with a build script to just move / link to the dist folder.

1 Like

And I've started looking again at various build tools to see if any of them might be particularly useful.

Either way, I'll be updating the main docs with several pages about build steps and various build tools. I realise that this is a complex topic and, to be honest, I barely understood it myself. I'm learning slowly though.

I have to say though, I was spoiled by the Svelte dev server which actually builds your dist output on the fly which means that your Node-RED served UI not only works, it doesn't even need to be manually reloaded! I just wish some of the other build tools did that but I haven't found one yet. Which means that you have to rebuild and then manually reload the page each time you make a change. Not terribly friendly.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.