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.
2 Likes
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
That's a great tip. I've been doing something similar with uibuilder, and it's made front-end testing much faster. Setting up a watch node and sending the _uib.reload message keeps things simple and efficient. It's especially useful when you're working with an app development company that needs to see quick UI changes during early stages. No need for complicated build tools since Node-RED and uibuilder already handle it well.
1 Like
Indeed. Also see today's update on the development of v7.5 as this includes the ability to run npm scripts defined in your uibuilder node instance's package.json - this allows things like build scripts to be run as well as installing/updating any dev-dependencies without the need to drop to a server terminal session. So you can have the best of both worlds! Literally (urm, well not quite 
) having your cake and eating it. 
