TotallyInformation / node-red-contrib-uibuilder

Easily create data-driven web UI's for Node-RED using any (or no) front-end framework.
https://totallyinformation.github.io/node-red-contrib-uibuilder/#/
Apache License 2.0
432 stars 85 forks source link

Saving/restoring index.html/index.js/index.css static content as part of flow? #369

Open alastaira opened 2 days ago

alastaira commented 2 days ago

Current Behavior

It is convenient to be able to archive/share/restore the state of a flow by using the Node-RED "export" function, and saving the current flow as a JSON file. However, since uibuilder's index.html/js/css are static files on the file system, the contents of these files is not included in the associated export. This makes it trickier to save/restore different versions of a flow, since the flow and front-end files must be restored separately and they can sometimes become out-of-sync with the rest of the flow.

Expected Behavior

It would be convenient to have a way of including the contents of the necessary files within the flow itself (perhaps they could be injected into uibuilder from a previous node in the flow?) so that they were kept together.

Steps To Reproduce

n/a

Example Node-RED flow

n/a

Environment

How is Node-RED installed? (globally admin):

How/where is UIBUILDER installed (palette-manager)

Have you changed any of the uibuilder settings in your settings.js file? Nope.

TotallyInformation commented 2 days ago

Hi, many thanks for raising this.

In fact, you can already do this but it perhaps isn't as obvious as it should be. Here is a fairly complex example:

image

The lower group you can see here is a set of Node-RED core template nodes, each of which contains the source code for the relavent files. In this case, there is simply an inject node to kick off the process that create/changes all of the files.

The change nodes simply provide each file name, the template provides the code and everything is sent to a single uib-save node that writes the file content to each specified file.


For your HTML (which is the thing most likely to be dynamically updated from Node-RED), you can go even further.

You can request a new copy of the live HTML from a connected client and output that using the uib-save node.

Here is a simple inject node that requests the HTML. Send the request to a uibuilder node and the response is returned via the same node.

image

The browser does not provide methods to do the same for JS/CSS files but you are not likely to dynamically update these from Node-RED, stick to updating the files as shown above.


Does that meet your requirements?

PS: I'll be updating all of the built-in examples that require code changes to match this workflow. Not quite there yet but on the backlog.