Hi all, quick tip for folk using uibuilder.
If you want to do some rapid development of your front-end UI, you probably want something that will reload your page whenever you make a change. This is commonly referred to as a "development server" and appears in many complex build tools.
But with Node-RED and uibuilder you can do the same thing for yourself. That's because the uibuilder front-end library recognises a particular message type from Node-RED and will reload the page for you. 
All you need is a watch node to watch for changes in the file(s) or folders you want, a change node to create the correct message properties which are _uib.reload set to true. All linked and connected to the input of your uibuilder node:
Your very own development server - all thanks to Node-RED and uibuilder!
Have fun, Julian.
1 Like
Nice tip, Julian! Do you expect I can use the same trick for the back-end /api/* files in the vnext branch?
Haha, always want more!!
What would you want/expect to happen there?
I think that if you change an API file, you may need to restart Node-RED at this time - but sadly I can't remember whether I tested that. I think I did but best for you to test it yourself You definitely do have to restart node-red or at least restart the flows so that the instance initialisation runs again because that's where the API file is read and added to the Express routes for the node instance.
Don't forget that the api runs in the back-end (Node-RED) context, not the front-end.
So if you are using something like PM2 on your test instance of Node-RED, you could add your api .js file to the watch in PM2 to make it restart on change. That's what I do with my custom nodes and for the settings.js files for example which is super nice when developing.
I've updated the documentation to make this clearer.
Ok, that's what I was wondering -- whether a _uib.reload = true msg could be used to avoid restarting the node-red runtime... but i see now that it's meant to push changed ui pages to the front-end.
1 Like
