Provides a stand-alone web server that allows for interfacing with Node-RED, while giving you help and complete freedom to create custom web interfaces.
You need at least one of these in order to make full use of all of uibuilder's features.

It is this node that creates a custom web server. You can have many nodes if that best meets your needs. But each node can serve many pages.

It also creates a set of filing system folders and files on the Node-RED server. These define the front-end UI you see in the browser as well as providing some important configuration.

This node is also where you configure much of uibuilder's web server such as installing helper libraries that you may wish to use to support your interfaces (e.g. VueJS, jQuery, etc). You can also use it to edit your custom UI code.

Detailed documentation can be found HERE.

More information on how to configure this node: uibuilder node configuration.

Specific information on how to use the front-end library: Client Library.

### Status display

Each instance (node) of uibuilder has a status display. Normally, the icon is blue. When 1 or more clients are connected, the text will show how many clients are connected.

### Inputs

payload string | buffer
  Optionally, the payload of the message to send to all connected client browser tabs.
_uib object
  Optionally, trigger low-code front-end events such as showing a notification message. Also used to signal to the front-end that the page should reload automatically. Useful when developing front-end code via the node's editor.
topic string
  Optionally, the MQTT topic to use. Takes preference over the topic defined in settings.
script string | string[]
  Optionally, a string or array of strings containing valid JavaScript. This will be added to the web page dynamically. Currently contains minimal validation so care is required. This feature is off by default, turn on in the Advanced Settings.
style string | string[]
  Optionally, a string or array of strings containing valid CSS for styling the front-end page. This will be added to the web page dynamically. Currently contains minimal validation so care is required. This feature is off by default, turn on in the Advanced Settings.

### Outputs

1. Standard output (data from front-end)
   payload string | buffer
     Typical data sent by the client.
   uibDomEvent object
     Used by the `uibuilder.eventSend()` front-end function. See the eventSend feature in the documentation for specifics.
   topic string
     A copy of the last inbound topic if present. Otherwise, the topic from the node's settings. Could also be changed by the front-end.
   _uib string
     Included only if turned on in advanced settings. Provides detailed information about the sending client. Useful for custom security processing.
     See the control output below for more specifics.
   other
     The client may send other data on the `msg` object.

   Note that input messages are not forwarded to the output unless the flag is set in the advanced settings.

2. Control output (controls from front-end or server)
   uibuilderCtrl string
     The name/id of the control message. See the documentation for details.
   cacheControl string
     Use in your flow to control the sending or clearing of a cache of messages to be sent to new/refreshed clients.
     This requires a separate function node to capture and replay inbound messages.

     REPLAY | Indicate to the back-end flow that a copy of the cached messages should be dumped to the front-end. Retaining the `_socket.id` will send the cache contents back to the requesting client.
     CLEAR | Indicate to the back-end flow that any cache should be completely cleared for everyone.

     See the documentation for details.
   from string
     Identifies the source of the msg since both server (back-end) and client (front-end) control messages will appear out of port #2.
   Other string
     Additional details about the client the message relates to is included. This varies somewhat between the different control message types. See the documentation for more details.

### Node Settings

Name string
  A short description shown in the admin interface
Topic string
  A topic name to use if the incoming msg does not contain one.
URL string
  There is no default and this entry is required.
  The URL path that the resulting page and other resources will be served from. Must be unique across Node-RED. Will also use the Node-RED scheme (http/https) and port or the custom uibuilder scheme and port if specified in settings.js. Will also be prefixed by the Node-RED setting httpNodeRoot.
  The url is also used to define the server filing system path for front-end code files.
  The url must be valid as a filename as well as a url path. It may not exceed 20 characters.

#### Files tab

Clicking this tab will display a file editor allowing you to edit the front-end files that define your user interface.
All text-based files in the `<uibRoot>/<url>/` folder on the server's filing system will be available to edit.

Note that you can expand the edit panel by clicking on the `⤡` arrow button underneath the panel. To exit fullscreen, press the same button (now highlighted) or the `Esc` key.

#### Template Settings

Template drop-down
  Select one of the built-in templates or load an external template.
Ext. Template text
  Only if "Load an external template using Degit" is selected. Degit is used to load a template from an external `git` repository.
  Try "totallyinformation/uib-template-test" as an example.
Load & Overwrite button
  Clicking the button will display a warning dialog. If you accept the warning, all of your current front-end code will be replaced with the template.

#### Libraries tab

Clicking this tab will display a list of currently available front-end library packages. This interface allows you to add, remove and update any library that can be installed via npm.
Libraries will be loaded into your `<userDir>/` folder in the same place as custom nodes. uibuilder retains an internal list of front-end libraries loaded this way. Each library will be served so that you can use it in your front-end html.

#### Advanced tab

Serve drop-down
  Choose which folder to serve files from. Only `src` and `dist` are available at the moment. This can now be changed simply by redeploying your flow, you don't need to restart Node-RED.
Include `msg._uib` in standard msg output check box
  If selected, will show the browser clientId, page name and real IP address in standard output (it is always shown in control msgs).
Show web view of source files check box
  If on, an extra web page is dynamically created at the indicated URL. That page shows an index listing of all files and folders on the server for this node. As this could be a security issue, it is turned off by default.
  `USE WITH EXTREME CAUTION`
  A button is exposed if this flag is on. Clicking the button will take you to the index view in a separate tab.
Allow scripts to be passed to front-end? check box
  If on, any string(s) in `msg.script` will be dynamically added to the scripts of the web page. Turn off to prevent scripts from being dynamically added and executed.
  NOTE: It is better to use uibuilder's `msg._ui` low-code features for passing scripts.
Allow styles to be passed to front-end? check box
  If on, any string(s) in `msg.style` will be dynamically added to the styles of the web page. Turn off to prevent styles from being dynamically added.
  NOTE: It is better to use uibuilder's `msg._ui` low-code features for passing styles.
Forward input to output? check box
  Forwards a copy of every received message direct to the output. Adds the topic from the above setting if one isn't present in the msg.

  Note that this may result in multiple output messages if your front-end code also auto-sends inbound messages.

#### Button Row

Open link
  The web app url for this instance. Click to see the app page in a new tab. Also available as a button at the top of the panel on all tabs.
Full details link
  Shows a web page with detailed information about the overall uibuilder configuration. Including details of all of the vendor modules that are available and all of the uibuilder endpoints along with both server and URL paths.
Node Details link
  Shows a web page with detailed information relavent just for this instance (node) of uibuilder. May be easier to read than the full details.
Docs link
  Opens the documentation for uibuilder in a separate tab. This does not require an Internet connection, the local docs are used. Also available as a button at the top of the panel on all tabs.

### File/Folder Structure

For more information, see the uibuilder documentation.

### Details

For more information, see the uibuilder documentation.

There are also examples of how to use uibuilder in the Node-RED import library, on the , and in the GitHub WIKI.

uibuilder can be discussed in the Node-RED Forum. Issues/bugs can be raised on GitHub.

### Admin Index (Details) page

The <admin url>/uibindex page lists all of the uibuilder endpoints and other details. You can use the following parameters:

type (string)
  The type of the data returned.
  html (default)
    Also used if no type parameter is given. Returns an HTML page showing the details for all deployed uibuilder nodes. Shows the server file locations of the instance and for vendor libraries.
  json
    Returns JSON data with both the source node ID's and matching URL's.
  urls
    Returns a JSON array of just the URL's in use from deployed uibuilder nodes. Used internally to ensure that new nodes use unique url's.
check (string)
  Passing a uibuilder instance name to the check parameter will result in a boolean (true/false) return. True if it is being delivered by a uibuilder instance, false otherwise. e.g. `?check=uibuilder`