Packaging Files in a Node-Red Flow

[jennyeg]

Hello everyone,

I have created a flow that I would like to publish, however my flow relies on reading a html file and a javascript file. My file node is currently reading these files from my local machine. However, when I publish this node, I would like for others to be able to access these files. Is there a way that I can package these files into the flow?

Thanks!

[Steve-Mcl]

Hi Jenny,

How much data are we talking about? (how big are these files) and what type of data are in these files?

You could include the file contents in a change node or template node & then instead of using the file in node, simply go via the change or template node.

[jennyeg]

Steve,

My html file is 25 KB and my javascript file is 5KB. These files make a series of http requests to an API server and return JSON data. Is it possible to insert html/ javascript code in the change node or template node? How would this be done?

Thanks!

[Steve-Mcl]

Well as an example, on a project I maintain, I store HTML (with embedded <script>) in a template node (here you can see a dev and live version) and when an external application calls the end point ([get]), they get the html passed from the dev or live template to the end point

the http response node has following header set so that it is treat as HTML...

NOTE: the html in the dev and live templates are about 26kb - seems to run very well - its been running about 6 months with about 100 individual users consuming it

[Colin]

I think I am right in saying that any files you include in the node's directory structure will be included in the package, and will therefore be in the node's install folder, but I don't know how you would access them from there at run time, or if that is even possible.

[jennyeg]

@Steve-Mcl I tried your example and was able to get this to work successfully for my html file. However, I have not been able to do this with my javascript file. I tried setting the content-type for this file to text/javascript but this is still not working. I also tried setting a script inside of an html element for the javascript file but I have still not been successful. I also have two images embedded within my html file that I'd like to add. I tried adding these into my node-red flow project in a folder, but was not successful. Do you know if there is a way to embed an image in a template node. Thank you for your help!

[Steve-Mcl]

@jennyeg

I also have two images embedded within my html file that I'd like to add

There are a couple of ways...
1-
You can convert an image to base64 then set the img src as the base64 data - that embeds the image.
e.g. Tutorial - Base64 Image Encoder

2-
You can convert an image to base64 then store the base64 string separately in a template and return it to the user as another endpoint like you are doing with the HTML string. (you would also set the content type accordingly)

NOTE1: You would be very wise to reduce the images to the smallest possible size before conversion to base64 as the string data can be very large (easily much larger than the html+js combined).

NOTE2: This is not the idea way of achieving this sort of thing - you'd be better off hosting the files and the having a public folder. Alternatively you could zip the files and tell the user how to do this?