uibuilder

https://github.com/totallyinformation/node-red-contrib-uibuilder
Admin
uibuilder is a Node-RED extension package (node-red-contrib-uibuilder) for building data-driven web...
Tokens:529,237
Snippets:3,698
Trust Score:9.6
License:Apache-2.0
Update:1 day ago
Show doc for...
Tokens:
Raw
### Start React dev server with npm run start

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS

Starts the development server. The app is then available at http://localhost:3000/react_ui.

```bash
npm run start
```

--------------------------------

### Install node-red-contrib-uibuilder and riot via npm

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Basic-uibuilder-RIOT-example-displaying-values,-switch-and-select-box

Run this command in ~/.node-red to install the required packages.

```bash
npm install node-red-contrib-uibuilder riot
```

--------------------------------

### Create React app and install uibuilder dependency

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS

Run these commands in a terminal on your server to create a new React app named react_ui and install node-red-contrib-uibuilder as a local dev dependency. Assumes Linux and default Node-RED installation paths.

```bash
cd ~/.node-red/uibuilder
# create a new react app, using the default template (see https://github.com/facebook/create-react-app for details)
npx create-react-app react_ui
cd react_ui
# install node-red-contrib-uibuilder as a local/relative dev dependency
npm install ../../node_modules/node-red-contrib-uibuilder --save-dev
```

--------------------------------

### GET /stats Example Response

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

JSON response from the /stats endpoint, showing aggregated statistics for the last 30 days.

```json
{
  "period": "last_30_days",
  "summary": {
    "active_instances": 8432,
    "total_uib_nodes": 21056,
    "total_markweb_nodes": 3104
  },
  "browsers": [
    { "browser_family": "Chrome",  "browser_version": "124", "total": 42100 },
    { "browser_family": "Firefox", "browser_version": "125", "total": 8300 }
  ],
  "uib_versions": [
    { "uib_version": "7.0.0", "instances": 5200 }
  ],
  "platforms": [
    { "os_platform": "linux",  "instances": 6100 },
    { "os_platform": "win32",  "instances": 1800 },
    { "os_platform": "darwin", "instances": 532 }
  ]
}
```

--------------------------------

### Install Wrangler CLI

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Install Wrangler globally via npm. Required for manual setup.

```bash
npm install -g wrangler
```

--------------------------------

### Add uibuilder and riot dependencies to package.json

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Basic-uibuilder-RIOT-example-displaying-values,-switch-and-select-box

Add these dependencies to the dependencies section of ~/.node-red/package.json to install uibuilder and RIOT.

```json
"dependencies": {
   "node-red-contrib-uibuilder": "*",
   "riot": "^3.7.3"
 }
```

--------------------------------

### Mock UIBuilder and template setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/auto-template-example.html

Initializes mock data and change listeners, imports the experimental module, and sets up both auto-updating and manual templates.

```javascript
// Mock UIBuilder for demonstration
const mockData = {
    userName: 'John Doe',
    userEmail: 'john.doe@example.com',
    messageCount: 5,
    lastLogin: new Date().toLocaleString(),
    status: 'online'
}
const changeListeners = {}

// Import experimental module
import '../uibuilder/experimental.mjs'
// window.uibExp = uibExperimental

// Set up auto-updating template
const autoElement = document.getElementById('auto-output')
const template = document.getElementById('auto-template').innerHTML

// Initialize with auto-update
autoElement.innerHTML = uibExperimental.processTemplate(template, mockData, autoElement)

// Set up manual template
const manualElement = document.getElementById('manual-output')
manualElement.innerHTML = uibExperimental.processTemplate(template, mockData)
```

--------------------------------

### Windows PowerShell setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Run the automated setup script on Windows. Requires Node.js 18+ and a Cloudflare account. The script installs Wrangler CLI if missing.

```powershell
cd packages/telemetry
.\setup.ps1
```

--------------------------------

### GET /stats Example Request (curl)

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Curl command to fetch aggregated statistics. Requires the 'Authorization: Bearer <STATS_TOKEN>' header.

```bash
curl -H "Authorization: Bearer <your-token>" \
     https://uibuilder-telemetry.<your-subdomain>.workers.dev/stats
```

--------------------------------

### NGINX configuration example for Node-RED and UIBUILDER

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/nginx-example-config.md

Place this configuration in a file such as red.conf in /etc/nginx/conf.d. Assumes a direct NGINX installation on Linux with systemd, and that the default.conf entries are commented out or deleted. After changes, reload with 'sudo nginx -s reload'.

```nginx
server {
    listen 80;
    server_name example.com;

    # Redirect all HTTP to HTTPS
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;

    # SSL configuration
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers off;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self' ws: wss:;" always;

    # Node-RED and UIBUILDER proxy
    location / {
        proxy_pass http://127.0.0.1:1880;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_redirect off;
    }
}
```

--------------------------------

### index.html - μPlot Chart Setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/creating-uis/charts.md

HTML page for the μPlot chart example. Loads uPlot and UIBUILDER scripts from CDN in the correct order, includes a container div with id 'uplot-chart', and a 'more' div for dynamic content.

```html
<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>μPlot Chart - Node-RED UIBUILDER</title>
    <meta name="description" content="Node-RED UIBUILDER - μPlot Chart">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uplot@latest/dist/uPlot.min.css">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.jsdelivr.net/npm/uplot@latest/dist/uPlot.iife.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body>
    
    <header>
        <h1 class="with-subtitle">μPlot Chart</h1>
        <div role="doc-subtitle">Using UIBUILDER for Node-RED</div>
    </header>

    <main>
        <div id="uplot-chart"></div>

        <!-- '#more' is used as a parent for dynamic HTML content in examples
            Also, send {topic:"more", payload:"Hello from <b>Node-RED</b>"} to auto-display the payload -->
        <div id="more" uib-topic="more"></div>
    </main>

</body></html>
```

--------------------------------

### Linux/macOS bash setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Run the automated setup script on Linux or macOS. Requires Node.js 18+ and a Cloudflare account. The script installs Wrangler CLI if missing.

```bash
cd packages/telemetry
chmod +x setup.sh
./setup.sh
```

--------------------------------

### D1 database configuration output

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Example output from 'wrangler d1 create' showing the binding, database_name, and database_id. Copy the database_id into wrangler.toml.

```toml
[[d1_databases]]
binding      = "DB"
database_name = "uibuilder-telemetry"
database_id  = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
```

--------------------------------

### start

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/client-docs/fns/function-list.md

Starts the client library.

```APIDOC
## start

### Description
Starts the client library.

### Method
Function call

### Endpoint
`start`

```

--------------------------------

### Auto Layout Grid and Flex Examples

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/experimental-README.md

JavaScript examples showing how to apply responsive layouts using uibExperimental.applyAutoLayout(). The first applies a grid layout with auto-fit columns and gap, the second applies a flex layout with wrap, gap, justify, and a breakpoint.

```javascript
// Apply grid layout
uibExperimental.applyAutoLayout('.grid-container', {
    type: 'grid',
    columns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '1rem',
    responsive: true
});

// Apply flex layout
uibExperimental.applyAutoLayout('.flex-container', {
    type: 'flex',
    wrap: 'wrap',
    gap: '1rem',
    justify: 'space-between',
    breakpoint: 768
});
```

--------------------------------

### Auto-Updating Template Setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/experimental-README.md

JavaScript example showing how to set up an auto-updating template using uibExperimental.processTemplate(). The element is passed for auto-update binding, and later calls to uibExperimental.set() trigger automatic re-rendering.

```javascript
// Set up auto-updating template
const element = document.getElementById('greeting');
element.innerHTML = uibExperimental.processTemplate(
    '<p>Hello {{userName}}! You have {{notifications}} messages.</p>',
    { userName: 'John', notifications: 5 },
    element  // Pass element for auto-update binding
);

// Later, when you change a variable, the template automatically updates
uibExperimental.set('userName', 'Jane');  // Template re-renders automatically
uibExperimental.set('notifications', 10); // Template re-renders automatically
```

--------------------------------

### Install dependencies and start Svelte dev server

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/svelte.md

Run from the instance root folder (e.g. ~/.node-red/uibuilder/svelte) after switching the template to 'Svelte Basic' and changing the Serve setting to 'dist'. The dev server auto-reloads the page when files in src change; ignore its own web server.

```bash
npm install && npm run dev
```

--------------------------------

### index.css

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-RiotJS

Styles for the RiotJS example page, setting heading colors.

```css
h1 { color: #448}
h2 { color: #585}
```

--------------------------------

### Deployment URL output

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/packages/telemetry/README.md

Example output from 'wrangler deploy' showing the Worker's public URL.

```text
https://uibuilder-telemetry.<your-subdomain>.workers.dev
```

--------------------------------

### start(options)

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/client-docs/functions.md

Starts Socket.IO communications with Node-RED. In most cases, this is no longer needed as the client startup is more robust, but it can be used when loading a page from an external server or to reset the connection.

```APIDOC
## start(options)

### Description
Starts Socket.IO communications with Node-RED. In most cases, this is no longer needed as the client startup is more robust, but it can be used when loading a page from an external server or to reset the connection.

### Method
Function call

### Parameters
#### Options Object
- **ioNamespace** (string) - Optional - Normally calculated for you. May need to be set manually when using an external server to serve the page.
- **ioPath** (string) - Optional - As above.
- **nopolling** (boolean) - Optional - If set, turns off Socket.IO's HTTP long-polling transport, forcing it to only use websockets.

### Notes
- Calling this again will reset the Socket.IO connection and internal msg event handlers.
- Use `uibuilder.showStatus()` to display the status of the client library on-page.
```

--------------------------------

### uib-control example (empty)

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/client-docs/custom-components.md

The documentation provides an empty HTML code block for the uib-control component example. No actual code is shown.

```html
```html
```
```

--------------------------------

### Load Markdown-IT and highlight.js in index.html

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/client-docs/markdown.md

Add these script and link tags to your index.html before loading the uibuilder client library. The order is optimal: highlight.js, Markdown-IT, then any Markdown-IT plugins, followed by uibuilder.iife.min.js. The example uses jsdelivr CDN URLs; alternatively, install libraries via the uibuilder node's library manager and use URLs like ../uibuilder/vendor/markdown-it/dist/markdown-it.min.js.

```html
    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">
	<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/hybrid.min.css">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
	<script defer src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>
	<script defer src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>
        <!-- Markdown-IT plugins can also be loaded here -->
        <script defer src="https://cdn.jsdelivr.net/npm/markdown-it-task-lists@latest/dist/markdown-it-task-lists.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script> -->
    <!-- #endregion -->
```

--------------------------------

### GET /api/three/

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/how-to/instance-apis.md

This endpoint is defined in an API file with a custom apiSetup() function. It handles GET requests to the instance API path, returning an HTML page with information about the Node-RED context and settings.

```APIDOC
## [GET] /api/three/

### Description
This endpoint is defined in an API file with a custom apiSetup() function. It handles GET requests to the instance API path, returning an HTML page with information about the Node-RED context and settings.

### Method
GET

### Endpoint
/api/three/

### Parameters
No parameters.

### Response
#### Success Response (200)
- **body** (HTML) - An HTML page containing the Node ID, uibuilder root path, Node-RED context stores, and Node-RED settings.

### Request Example
```js
// Example request to the endpoint
// Assuming the instance URL is http://1.2.3.4:1880/test1/api/three/
// The request would be:
// GET http://1.2.3.4:1880/test1/api/three/
```

### Response Example
```html
<div>
  Node ID: <node-id>, <br>
  uibuilder root path: <uib-root>, <br>
  Node-RED context stores: [<context-stores>]
</div>
<h2>Node-RED Settings</h2>
<pre><code>{<node-red-settings>}</code></pre>
```
```

--------------------------------

### Plotly Chart HTML Setup (index.html)

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/creating-uis/charts.md

HTML page for the Plotly chart example. Loads Plotly from CDN, the UIBUILDER library, and custom JavaScript. Includes a container div with id 'plotly-chart' and a 'more' div for dynamic content.

```html
<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Plotly Chart - Node-RED UIBUILDER</title>
    <meta name="description" content="Node-RED UIBUILDER - Plotly Chart">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="https://cdn.plot.ly/plotly-3.0.1.min.js" charset="utf-8"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body>
    
    <header>
        <h1 class="with-subtitle">Plotly Chart</h1>
        <div role="doc-subtitle">Using UIBUILDER for Node-RED</div>
    </header>

    <main>
        <div id="plotly-chart"></div>

        <!-- '#more' is used as a parent for dynamic HTML content in examples
            Also, send {topic:"more", payload:"Hello from <b>Node-RED</b>"} to auto-display the payload -->
        <div id="more" uib-topic="more"></div>
    </main>

</body></html>
```

--------------------------------

### index.css for MoonJS example

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-MoonJS

Basic CSS styling for the example page, including font family, margins/padding for common elements, and color coding for syntax highlighting classes (string, number, boolean, null, key).

```css
body {font-family: sans-serif;}
div, p, code, pre { margin:0.3em; padding: 0.3em;}
pre .string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
```

--------------------------------

### index.html

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-RiotJS

Main HTML page for the RiotJS example, including inline Riot tag definitions and mount points.

```html
<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

 <title>Node-RED UI Builder - RiotJS</title>
 <meta name="description" content="Node-RED UI Builder - Testing RiotJS">

 <link rel="icon" href="images/logo-red.png">

 <!-- See https://goo.gl/OOhYW5 -->
 <link rel="manifest" href="manifest.json">
 <meta name="theme-color" content="#3f51b5">

 <!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="application-name" content="Node-RED UI Builder">

 <!-- Add to homescreen for Safari on iOS -->
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="apple-mobile-web-app-title" content="Node-RED UI Builder">

 <!-- Homescreen icons
 <link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
 <link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
 <link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
 <link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
 <link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
 -->
 <link rel="stylesheet" href="vendor/normalize.css/normalize.css">
 <link rel="stylesheet" href="index.css">
 <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> --> 
 
</head>
<body>
 <h1>Testing RiotJS</h1>
 
 <!-- inlined tag definition, Custom tags can be empty, HTML only or JavaScript only -->

 <my-tag></my-tag><!-- mount point -->

 <script type="riot/tag">
 <my-tag>
 <h2>(0) Some local stuff first</h2>
 <p>
 msgCounter (global JS variable): {msgCounter.data}
 </p>
 <p>This only updates when riot.update is called. We call that in <i>index.js</i> when we receive a new msg from SocketIO.</p>

 <h2>(1) Next is an HTML-only tag, no JS allowed ...</h2>
 <tag1>
 <p> We get no local html here so this doesn't show up unless you use &lt;yield/> in your tag definition.</p>
 </tag1>

 <h2>(2) Next up, a JavaScript only Riot tag (see the console log) ...</h2>
 <tag2>
 <p>
 HTML and content is inside the tag, the tag definition is only Javascript.
 The next line is an attribute (tag2Msg) from the JavaScript:
 </p>
 { tag2Msg }
 </tag2>

 <tag3 />

 <h2>(4) Next, an external tag file (<i>with-tags.js</i>) ...</h2>
 <example message="We are passing a message!"/>

 this.on('update', function() {
 // allows recalculation of context data before the update

 console.log('my-tag was updated')
 console.log(msgCounter.data)
 //console.log(msg)
 })
 </my-tag>
 
 <tag1>
 <p>This is an HTML-only tag, no JS allowed. So the following will be empty:</p>
 <p>A message on mount: { opts.mymsg }</p>
 <p>But using &lt;yield/> lets us show information inserted where the tag is mounted (see <i>my-tag</i> in the source):</p>
 <div style="margin-left:20%;margin-right:20%;border:1px solid silver;text-align:center;">
 <yield/>
 </div>
 </tag1>
 
 <tag2>
 // This is a JavaScript-only tag, no HTML allowed

 this.tag2Msg = 'Welcome to tag2'

 console.log('tag2, a JavaScript-only tag')

 this.on('mount', function(){
 console.log('tag2 was mounted!')
 })
 </tag2>
 
 <tag3>
 <h2 onclick={updateMe}>(3) Another tag ...</h2>
 <p></p>
 <p>Parent opts.mymsg: { parent.opts.mymsg }</p>
 <p>Global msgCounter.data: { msgCounter.data }</p>
 <p>This mymsg: { mymsg }</p>

```

--------------------------------

### index.html - jQuery Example Page Structure

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-JQuery

HTML page for the jQuery example. Loads jQuery, the uibuilder IIFE library, and the custom index.js script in the correct order. Includes a '#more' div used as a parent for dynamic HTML content in examples.

```html
<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>jQuery Example - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - jQuery Example">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/vendor/jquery/dist/jquery.min.js"></script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->

</head><body class="uib">
    
    <h1 class="with-subtitle">jQuery Example</h1>
    <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

    <div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>

</body></html>
```

--------------------------------

### Example default.conf file with security headers and server block

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/nginx-example-config.md

NGINX server configuration that disables server tokens, adds security headers (X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Content-Security-Policy), and defines a default server block listening on port 80. Includes commented-out examples for proxying PHP scripts and denying access to .htaccess files.

```nginx
# read more here http://tautt.com/best-nginx-configuration-for-security/

# don't send the nginx version number in error pages and Server header
server_tokens off;

# don't allow the browser to render the page inside an frame or iframe and avoid clickjacking http://en.wikipedia.org/wiki/Clickjacking
# if you need to allow [i]frames, you can use SAMEORIGIN or even set an uri with ALLOW-FROM uri https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options
add_header X-Frame-Options SAMEORIGIN;

# when serving user-supplied content, include a X-Content-Type-Options: nosniff header along with the Content-Type: header,
# to disable content-type sniffing on some browsers.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
# currently suppoorted in IE > 8 http://blogs.msdn.com/b/ie/archive/2008/09/02/ie8-security-part-vi-beta-2-update.aspx
# http://msdn.microsoft.com/en-us/library/ie/gg622941(v=vs.85).aspx
# 'soon' on Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=471020
add_header X-Content-Type-Options nosniff;

# This header enables the Cross-site scripting (XSS) filter built into most recent web browsers.
# It's usually enabled by default anyway, so the role of this header is to re-enable the filter for 
# this particular website if it was disabled by the user.
# https://www.owasp.org/index.php/List_of_useful_HTTP_headers
add_header X-XSS-Protection "1; mode=block";

# with Content Security Policy (CSP) enabled(and a browser that supports it(http://caniuse.com/#feat=contentsecuritypolicy),
# you can tell the browser that it can only download content from the domains you explicitly allow
# http://www.html5rocks.com/en/tutorials/security/content-security-policy/
# https://www.owasp.org/index.php/Content_Security_Policy
# I need to change our application code so we can increase security by disabling 'unsafe-inline' 'unsafe-eval'
# directives for css and js(if you have inline css or js, you will need to keep it too).
# more: http://www.html5rocks.com/en/tutorials/security/content-security-policy/#inline-code-considered-harmful
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net; img-src 'self' https://ssl.google-analytics.com https://s-static.ak.facebook.com https://assets.zendesk.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://assets.zendesk.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://assets.zendesk.com https://www.facebook.com https://s-static.ak.facebook.com https://tautt.zendesk.com; object-src 'none'";

# Default server entry
server {

    listen 80;
    listen [::]:80;
    server_name  localhost;

    # You should always have an access log for security and audit
    access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page  404  /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;

    #}


    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}
```

--------------------------------

### MoonJS app with uibuilder integration (index.js)

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-MoonJS

Attaches a Moon instance to an HTML element with id 'app' and sets up uibuilder communication. Includes data properties for UI state, computed properties for formatting received/sent messages, and methods for incrementing a counter and syntax highlighting JSON. The mounted hook starts uibuilder and registers onChange watchers for msg, msgsReceived, sentMsg, and msgsSent.

```javascript
// Attach a Moon instance to html element with id "app"
const app1 = new Moon({
    el: "#app",
    data: {
        startMsg    : "Moon has started, waiting for messages",
        feVersion   : '',
        counterBtn  : 0,
        msgsReceived: 0,
        msgsControl : 0,
        msgsSent    : 0,
        msgRecvd    : '[Nothing]',
        msgSent     : '[Nothing]',
        msgCtrl     : '[Nothing]',
        inputText   : ''
    }, // --- End of data --- //
    computed: {
        hLastRcvd: {
            get: function() {
                const msgRecvd = this.get('msgRecvd')
                if (typeof msgRecvd === 'string') return 'Last Message Received = ' + msgRecvd
                else return 'Last Message Received = ' + this.callMethod('syntaxHighlight', [msgRecvd])
            }
        },
        hLastSent: {
            get: function() {
                const msgSent = this.get('msgSent')
                if (typeof msgSent === 'string') return 'Last Message Sent = ' + msgSent
                else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgSent])
            }
        },
        hMsgCtrl: {
            get: function() {
                const msgCtrl = this.get('msgCtrl')
                if (typeof msgCtrl === 'string') return 'Last Message Sent = ' + msgCtrl
                //else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgCtrl])
                else return 'Last Message Sent = ' + JSON.stringify(msgCtrl)
            }
        }
    }, // --- End of computed --- //
    methods: {
        increment: function() {
            // Increment the count by one
            this.set('counterBtn', this.get('counterBtn') + 1)
            let topic = (this.get('msgRecvd')).topic || 'uibuilder/moon'
            uibuilder.send( { 'topic': topic, 'payload': { 'type': 'counterBtn', 'btnCount': this.get('counterBtn'), 'message': this.get('inputText') } } )
        },
        // return formatted HTML version of JSON object
        syntaxHighlight: function(json) {
            json = JSON.stringify(json, undefined, 4)
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number'
                if (/^"/.test(match)) {
                    if (/^:/.test(match)) {
                        cls = 'key'
                    } else {
                        cls = 'string'
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean'
                } else if (/null/.test(match)) {
                    cls = 'null'
                }
                return '<span class="' + cls + '">' + match + '</span>'
            })
        } // --- End of syntaxHighlight --- //
    }, // --- End of methods --- //
    hooks: { // Available hooks: init,mounted,updated,destroyed
        
        mounted: function(){
            console.debug('app mounted - setting up uibuilder watchers')

            /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
             * Pass the namespace and ioPath variables if hosting page is not in the instance root folder
             * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
             * e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
             */
            uibuilder.start()

            this.set( 'feVersion', uibuilder.get('version'))

            // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
            // Note that you can also listen for 'msgsReceived' as they are updated at the same time
            // but newVal relates to the attribute being listened to.
            uibuilder.onChange('msg', function(newVal){
                console.info('property msg changed!', newVal)
                app1.set( 'msgRecvd', newVal)
            })
            // As noted, we could get the msg here too
            uibuilder.onChange('msgsReceived', function(newVal){
                console.info('New msg sent FROM Node-RED over Socket.IO. Total Count: ', newVal)
                app1.set( 'msgsReceived', newVal)
            })


            // If a message is sent back to Node-RED
            uibuilder.onChange('sentMsg', function(newVal){
                console.info('property sentMsg changed!', newVal)
                app1.set( 'msgSent', newVal)
            })
            uibuilder.onChange('msgsSent', function(newVal){
                console.info('New msg sent TO Node-RED over Socket.IO. Total Count: ', newVal)
                app1.set('msgsSent', newVal )
            })
        }
    }
})
```

--------------------------------

### uibuilder.setPing example

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/jsdoc/uibuilder.module.js.md

Sets up a repeating HTTP ping to keep sessions alive. The example shows a 2-second repeat and an onChange listener for the 'ping' property.

```javascript
uibuilder.setPing(2000) // repeat every 2 sec. Re-issue with ping(0) to turn off repeat.
  uibuilder.onChange('ping', function(data) {
     console.log('pinger', data)
  })
```

--------------------------------

### Include-fragment-element local installation script tag

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/client-docs/custom-components.md

Adds the include-fragment-element component from a local UIBUILDER vendor directory. Install the package via the UIBUILDER Library Manager with the name @github/include-fragment-element.

```html
<script defer src="../uibuilder/vendor/@github/include-fragment-element/dist/index.min.js"></script>
```

--------------------------------

### Build documentation bundle with npm run buildDocBundle

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/tips/README.txt

Run this command after adding or changing any .md file in the tips folder to rebuild the index in docs/.config/index.js.

```bash
npm run buildDocBundle
```

--------------------------------

### Vue mounted hook with uibuilder setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Examples-Vue-Complex-Home-Dashboard

Sets up uibuilder debug, starts the heating update timer, restores the saved tab, and listens for msg changes from Node-RED.

```javascript
mounted: function(){
        uibuilder.debug(false) // output uibuilderfe debug messages

        //console.debug('Vue:mounted - setting up uibuilder watchers')

        // Save confusion by keeping a specific reference to this Vue app
        const vueApp = this

        // Start countdown. If lastUpdate not updated in 2 minutes, show a warning.
        vueApp.hTimer = vueApp.heatingUpdTimer()

        // On-load Reset the current tab to the one saved in session storage - strange, stored as number but retrieves as a string
        vueApp.tabIndex =  Number(sessionStorage.currentTab)

        // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
        // Note that you can also listen for 'msgsReceived' as they are updated at the same time
        // but newVal relates to the attribute being listened to.
        uibuilder.onChange('msg', function(newVal){
            //console.debug('Vue:mounted:UIBUILDER: property msg changed! ', newVal)
            vueApp.msgRecvd = newVal
```

--------------------------------

### setup

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/blob/main/docs/dev/server-libs/fs.md

Configures the class instance with uibuilder instance information. e.g. references to `RED`, etc.

```APIDOC
## setup

### Description
Configures the class instance with uibuilder instance information. e.g. references to `RED`, etc.

### Method
Utility method

### Parameters
None documented.
```

--------------------------------

### Build React app with npm run build

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Example:-ReactJS

Produces a production build under ./dist. After building, browse http://localhost:1880/react_ui.

```bash
npm run build
```

--------------------------------

### Node-RED flow for alarm button acknowledgement

Source: https://github.com/totallyinformation/node-red-contrib-uibuilder/wiki/Simple-Button-Acknowledgement-Example

Paste this flow into your Node-RED page. It includes uibuilder, inject, function, debug, and MQTT nodes to simulate alarms and acknowledge them. MQTT nodes require a broker and server setup; delete them if not needed, otherwise you may get an ignorable error.

```json
[{"id":"1a7c5d0e.0fdc73","type":"uibuilder","z":"32910924.887cb6","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":1120,"y":1040,"wires":[["a39ed31d.bca6f"],[]]},{"id":"3403d92d.5c4176","type":"inject","z":"32910924.887cb6","name":"Alarm 1","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":920,"wires":[["fec3d20f.90bba"]]},{"id":"fec3d20f.90bba","type":"function","z":"32910924.887cb6","name":"alarm1StatusOn","func":"msg.topic = \"alarm1Status\";\nmsg.payload = 1;\n\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":920,"wires":[["1a7c5d0e.0fdc73","eb57a4c3.9770b8"]]},{"id":"a39ed31d.bca6f","type":"debug","z":"32910924.887cb6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1310,"y":980,"wires":[]},{"id":"364bd0d0.f77b4","type":"comment","z":"32910924.887cb6","name":"Press to trigger alarm","info":"","x":360,"y":880,"wires":[]},{"id":"fe887baa.3db618","type":"inject","z":"32910924.887cb6","name":"Alarm 2","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":980,"wires":[["1a7b62b6.219fad"]]},{"id":"1a7b62b6.219fad","type":"function","z":"32910924.887cb6","name":"alarm2StatusOn","func":"msg.topic = \"alarm2Status\";\nmsg.payload = 1;\n\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":980,"wires":[["1a7c5d0e.0fdc73","eb57a4c3.9770b8"]]},{"id":"eb57a4c3.9770b8","type":"debug","z":"32910924.887cb6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1310,"y":920,"wires":[]},{"id":"55baa5ee.7f793c","type":"comment","z":"32910924.887cb6","name":"Note the data format - msg.topic and msg.payload","info":"","x":730,"y":880,"wires":[]},{"id":"16d11a39.ea9dd6","type":"mqtt in","z":"32910924.887cb6","name":"","topic":"alarm1Status","qos":"2","datatype":"auto","broker":"","x":910,"y":1120,"wires":[["1a7c5d0e.0fdc73"]]},{"id":"a6317bd9.41d248","type":"comment","z":"32910924.887cb6","name":"You can feed MQTT node in directly - very cool","info":"","x":820,"y":1080,"wires":[]},{"id":"6a61d395.7b7b8c","type":"mqtt in","z":"32910924.887cb6","name":"","topic":"alarm2Status","qos":"2","datatype":"auto","broker":"","x":910,"y":1180,"wires":[["1a7c5d0e.0fdc73"]]},{"id":"909a0c6.28a6df","type":"mqtt out","z":"32910924.887cb6","name":"","topic":"alarm1Status","qos":"2","retain":"true","broker":"","x":710,"y":1120,"wires":[]},{"id":"11121be6.386bc4","type":"inject","z":"32910924.887cb6","name":"Alarm 1","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":1120,"wires":[["bed91829.4e2bf8"]]},{"id":"50cb6c28.fe4ef4","type":"inject","z":"32910924.887cb6","name":"Alarm 2","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":350,"y":1180,"wires":[["a1aa55a8.870af8"]]},{"id":"2da46cbb.ce99e4","type":"mqtt out","z":"32910924.887cb6","name":"","topic":"alarm2Status","qos":"2","retain":"true","broker":"","x":710,"y":1180,"wires":[]},{"id":"bed91829.4e2bf8","type":"function","z":"32910924.887cb6","name":"alarm1StatusOn","func":"msg.payload = 1;\n\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":1120,"wires":[["909a0c6.28a6df"]]},{"id":"a1aa55a8.870af8","type":"function","z":"32910924.887cb6","name":"alarm2StatusOn","func":"msg.payload = 1;\n\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":1180,"wires":[["2da46cbb.ce99e4"]]},{"id":"92ddd40.ae8183","type":"comment","z":"32910924.887cb6","name":"You will need to download mqtt broker and set it up","info":"","x":830,"y":1220,"wires":[]},{"id":"2ff9727c.2f200e","type":"comment","z":"32910924.887cb6","name":"For debug viewer","info":"","x":1320,"y":880,"wires":[]}]
```
Tokens:
Raw