V2 URI Paths - TotallyInformation/node-red-contrib-uibuilder GitHub Wiki

uibuilder v2 brings a number of breaking changes from v1. This page shows the new URI paths that you need to include in your front-end HTML files.

urls or paths that are surrounded with <...> are variable. Their definitions are shown at the bottom of the page.

The examples shown below are references that you would put into your index.html file to make resources available to your front-end.

• <httpNodeRoot>/<instanceName>/ is mapped to several folders (shown in priority order):

  • <uibRoot>/<instanceName>/dist/ (only if index.html exists there)
  • <uibRoot>/<instanceName>/src/
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/dist/ (only if index.html exists there)
  • <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/

  Examples:

  • <link rel="icon" href="./images/node-blue.ico"> (exists in <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/)
  • <link rel="manifest" href="./manifest.json">
  • <link rel="stylesheet" href="./index.css" media="all">
  • <script src="./uibuilderfe.min.js"></script> (exists in <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/)
  • <script src="./index.js"></script> (exists in <uibRoot>/<instanceName>/src/ or <uibRoot>/<instanceName>/dist/)

• <httpNodeRoot>/common is mapped to the <uibRoot>/common/ folder. This will be created if it doesn't exist. Use this to serve up resources that might be common to multiple instances of uibuilder.

  Example:

  • <img src="./common/node-blue-192x192.png">

• <httpNodeRoot>/<moduleName>/vendor/<packageName>/ is mapped to the <userDir>/node_modules/<packageName> folder which is where npm will install things when installing to the userDir folder.

  uibuilder v2 picks up and serves several common front-end packages automatically (VueJS, REACT, jQuery, etc.) so you can install them yourself if you like. However, it is easier to install them from the uibuilder admin UI, just open any instance of the uibuilder node and click on the "Manage front-end libraries" button.

  Examples:

  • <link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
  • <script src="../uibuilder/vendor/vue/dist/vue.js"></script>

• ../uibuilder/vendor/socket.io/socket.io.js provides the Socket.io client library.

• <httpNodeRoot>/<moduleName>/common/ is mapped to <uibRoot>/common - used to serve up resources you want available to all instances of uibuilder.

  Example <img src="../uibuilder/common/myimage.png">

• <uibRoot> = <httpNodeRoot>/<moduleName> or <userDir>/projects/<activeProject>/<moduleName> if Node-RED projects are in use. <moduleName> = 'uibuilder'
• <userDir> = ~/.node-red normally.
• <packageName> = Name of an npm package installed via npm install <packageName>.
• <instanceName> = Name (url) assigned to an instance node of uibuilder in a flow.