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.

Overview

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

Download:

http://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758

Node-RED Frontend Site - Flow ScreenshotNode-RED Frontend Site - Page Screenshot

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

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

<script>{{{payload.script}}}</script>
<style>{{{payload.style}}}</style>

Basic Client Site Flow

Screen Shot 2016-08-01 at 3.20.04 PM

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

Screen Shot 2016-08-01 at 3.20.22 PM

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

Screen Shot 2016-08-01 at 3.20.36 PM

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.

Screen Shot 2016-08-01 at 3.20.53 PM

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

https://www.facebook.com/internetoflego/