Pencil line mustache. Web Form with Node-RED, CSS,JS,HTML - Internet of LEGO

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. Mustache style chart.

Since a typical front-end web page consists of several different files for JavaScripts, CSS style sheets and the HTML page, I wanted a way to keep these parts modular.

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 Flow

The important technique is how the mustache templates are used. Each template will set the “property” relative to the content.

Mustache names chart

The CSS node sets the “msg.payload.style” property. The JavaScript node sets the “msg.payload.script” property. The HTML node then includes these properties

Basic Client Site Flow

The JavaScript mustache node will contain your script code. Set the “property” to “msg.payload.script” (or similar convention).

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.

Movember mustache guide

Ideas how this could be used

Dashboard, filled with buttons and widgets

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