Many of the Internet of LEGO projects rely on Node-RED for orchestration and client interactions. I found that building the backend services were pretty natural with the platform, but building a simple web page was a little more challenging. This article is just a simple example of my own tips & tricks to help other Node-RED enthusiasts.
Initially, I used to combine all of the file contents into a single “mustache” node. This node is responsible for providing the HTML to the client’s browser. This worked, but the node would have too much code in it, that could actually be split up and re-used by other portions of the site such as style sheets and scripts.
I have created a sample Node-RED Flow to demonstrate how this can be accomplished, complete with an AJAX form post to get the results back to the client as well as send the information onto additional flows.
The important technique is how the mustache templates are used. Each template will set the “property” relative to the content.
Basic Client Site Flow
The CSS mustache node will contain your style code. Set the “property” to “msg.payload.style” (or similar convention).
The HTML mustache node will contain your HTML code but will now include the scripts and styles, along with other imports in a familiar way.
Ideas how this could be used
- Login Form
- Dashboard, filled with buttons and widgets
- Landing Page
Hopefully Node-RED users will find these Tips & Tricks helpful for their next project!
Please feel free to share comments or post examples of your own solutions on the Internet Of LEGO Facebook page