HowTo: Embedding Node-RED
Bring Node-RED to a broader audience is not easy. First of all it is a programming tool, second its main focus is Internet of Things (IoT) and thirdly it is a visual flow based programming - whatever that maybe.
It does seem that it is impossible to explain Node-RED to non-techies and even programmers roll their eyes. I have been searching for possibilities to bring my enthusiasm for Node-RED across to others however the more I do, the more I realise how niche the topics visual programming, flow based programming and Node-RED really are. Here I could give up.
But I shan’t be daunted and keep coming up with ideas to bring Node-RED to others. It began with a simple image of flows: instead of text, an interactive image of a flow can be embedded in a blog page, having been generated from the original flows.json content. Scrolling and zooming are possible, which provide an insight into the look of a Node-RED flow[1]:
The flow shown can be found on FlowHub.org and can also be viewed in 3D.
However it remains a static image of a flow that creates a ticker wall. Certainly one can see that the code looks like what the code does, i.e., a ticker wall. However real understanding only comes if one can see it in action. Now of course, if you do not have an installation of Node-RED to hand or cannot install Node-RED, then you are very much left in the dark on what the ticker wall looks like in action.
This is something that has been giving me sleepless nights for a long time. I have been thinking about this ever since starting out with Node-RED.
Clarification: Node-RED is a fully blown development environment, you can literally do anything with it. Having an internet facing Node-RED installation with a server would be an open invitation to all sorts of nasty happenings. The Internet is no longer that friendly place frequented by academics to exchange ideas, the internet has become a commercial affair, a battle for the eyeballs of consumers. An open installation of Node-RED is therefore not an option.
Having a login or SaaS solution would be one approach but that would be one step too far for my intended audience. Who is willing to signup for a service just to see a ticker wall? Certainly not me. What was needed was an in-browser server-less Node-RED that simulates the workings of a complete Node-RED.
There have been a couple of attempts, one using Stackblitz which installs an entire Node-RED setup in the browser. Unfortunately the Stackblitz solution is too technical and fragile to provide a serious approach for all browsers, mobile/desktop and for all users. An existing a server-less version of Node-RED does what I want but Pagenodes has not been updated for six years and has an old Node-RED version. But it gave me the idea for creating something similar.
I sat down on one of my sleepless days and began playing around. Strangely it turns out to be far simpler than I had thought — especially having played around with Stackblitz. In the end, deadred was born[2]. Now the same flow shown above can be viewed and run/executed/experienced in a Node-RED simulation. As can any flow hosted at FlowHub.org — my site for hosting the various flows that I have played around with.
But wait, that’s not all!
I then realised that I could also embed that Node-RED into my blog:
Finally I can simulate the Node-RED experience in the browser, with no strings attached and no hackable server. If you want to create a bitcoin miner with the static Node-RED installation, go ahead - it will run in your browser, not on my server! The ticker wall flow can be started by clicking the button on the top left:
Finally everyone can enjoy using Node-RED at the click of a button, no signup, no credit card necessary.
The Server-less Server
At this point, I have a confession to make: the server-less Node-RED is not completely server-less. In fact there is a server to provide the initial flow. There are a couple of other things the server does to ensure that Node-RED does not complain about not having a server. The code for this server is this flow — of course, the server for the server-less Node-RED is a Node-RED flow.
The flows that can initially be loaded are hosted at FlowHub.org and have a fhid= parameter. Using a gist= parameter for referring to a flow hosted at flows.nodered.org is also supported.
If you want to do this at home, then clone the repo, install the server flow and change the dynamic server address. I have tried to keep the changes to the original javascript code to a minimum. My changes to that file are contained in the red.cdn.js and all other additions are in deadred.js - for simulating flow execution.
In the end, to embed the above Node-RED, all I did was:
<iframe src="https://deadred.openmindmap.org?fhid=a3f6aebd9bb877bc" width="100%" height="600px"></iframe>
That fhid= can then be replaced with gist= and you can embed any Node-RED flow into your page.
Browser support
As usual and as expected, not all browsers will support this. Chrome requires the iframe to come from the same domain, so I used the subdomain deadred (it requires this because of local storage access). Firefox and Safari seem less caring about that, but it seems using a subdomain and the same domain is best for embedding iframes.
The code for transforming Node-RED flows into vector images such as the one above, is over at GitHub. ↩︎
I did not call it deadred for marketing purposes, originally I had not planned to add flow execution simulation so it was dead. With partial flow execution, its seems to be a concussed Node-RED rather than dead. ↩︎
The author is available for Node-RED development and consultancy.