-
-
Notifications
You must be signed in to change notification settings - Fork 93
V2 URI Paths
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.
-
<httpNodeRoot>/<instanceName>/is mapped to several folders (shown in priority order):-
<uibRoot>/<instanceName>/dest/(only ifindex.htmlexists there) <uibRoot>/<instanceName>/src/-
<userDir>/node_modules/node-red-contrib-uibuilder/nodes/dest/(only ifindex.htmlexists there) <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/
Examples:
<link rel="icon" href="./images/node-blue.ico"><link rel="manifest" href="./manifest.json"><link rel="stylesheet" href="./index.css" media="all"><script src="./uibuilderfe.min.js"></script><script src="./index.js"></script>
-
-
<httpNodeRoot>/<moduleName>/vendor/<packageName>/is mapped to the<userDir>/node_modules/<packageName>folder which is where npm will install things when installing to theuserDirfolder.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.jsprovides 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-rednormally. -
<packageName>= Name of an npm package installed vianpm install <packageName>. -
<instanceName>= Name (url) assigned to an instance node of uibuilder in a flow.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)