All Projects → TotallyInformation → Node Red Contrib Uibuilder

TotallyInformation / Node Red Contrib Uibuilder

Licence: apache-2.0
Easily create data-driven web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Node Red Contrib Uibuilder

Theorytracker
🎼 HTML5/WebAudio multi-track functional harmony analysis and songwriting app! -- https://hlorenzi.github.io/theorytracker/
Stars: ✭ 62 (-71.16%)
Mutual labels:  web-application, web-app, webapp
servant-beam-realworld-example-app
Exemplary fullstack Medium.com clone powered by Servant and Beam
Stars: ✭ 33 (-84.65%)
Mutual labels:  web-app, web-application, webapp
workflowmanager-viewer-js
Source code for ArcGIS Workflow Manager JavaScript viewer - Manage your workflows on the web.
Stars: ✭ 23 (-89.3%)
Mutual labels:  web-app, web-application, webapp
Alumna
[Alpha release of v3] Development platform for humans / Plataforma de desenvolvimento para humanos
Stars: ✭ 32 (-85.12%)
Mutual labels:  web-application, web-app, webapp
Sharry
Sharry is a self-hosted file sharing web application.
Stars: ✭ 170 (-20.93%)
Mutual labels:  web-application, web-app, webapp
Musicode
🎶 Markup language for music creation and analysis! -- https://hlorenzi.github.io/musicode/
Stars: ✭ 34 (-84.19%)
Mutual labels:  web-application, web-app, webapp
Prestashop
Free PWA & SPA for PrestaShop
Stars: ✭ 59 (-72.56%)
Mutual labels:  web-app, webapp
Flutterwebsite
The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite
Stars: ✭ 76 (-64.65%)
Mutual labels:  website, webapp
Adoptoposs
Finding co-maintainers for your open source software project.
Stars: ✭ 93 (-56.74%)
Mutual labels:  web-application, web-app
Serverlesslibrary
Source code for the Azure Serverless Community Library
Stars: ✭ 119 (-44.65%)
Mutual labels:  web-app, website
Mopaint
🎨💪 Modern, modular paint and more! (pre-alpha, not much done yet)
Stars: ✭ 50 (-76.74%)
Mutual labels:  web-application, web-app
Keira2
The Azerothcore/Trinitycore Database Web-Editor
Stars: ✭ 110 (-48.84%)
Mutual labels:  web-application, web-app
Percy
Build frontend browser apps with Rust + WebAssembly. Supports server side rendering.
Stars: ✭ 1,856 (+763.26%)
Mutual labels:  web-application, web-app
Web Applications With Fastapi Course
Demo code and other handouts for students of our FastAPI Web Apps course.
Stars: ✭ 56 (-73.95%)
Mutual labels:  website, webapp
Navigation Timing
Navigation Timing
Stars: ✭ 92 (-57.21%)
Mutual labels:  web-application, webapp
Channelstream
Channelstream is a websocket communication server for web applications
Stars: ✭ 52 (-75.81%)
Mutual labels:  websockets, webapp
Docker Vulnerable Dvwa
Damn Vulnerable Web Application Docker container
Stars: ✭ 117 (-45.58%)
Mutual labels:  web-application, web-app
Jasypt Spring Boot
Jasypt integration for Spring boot
Stars: ✭ 1,948 (+806.05%)
Mutual labels:  website, webapp
Webapp.rs
A web application completely written in Rust. 🌍
Stars: ✭ 1,888 (+778.14%)
Mutual labels:  website, webapp
React Native Open Project
可能是目前最用心收集的 React Native 优秀开源项目大全,公众号【aMarno】www.marno.cn
Stars: ✭ 2,254 (+948.37%)
Mutual labels:  web-app, webapp

NPM Version NPM Total Downloads NPM Downloads per month GitHub last commit GitHub stars GitHub watchers GitHub license Min Node Version Package Quality Dependencies Open Issues Closed Issues

Please Note that:

  • v3.1.3+ no longer installs vue and bootstrap-vue, if you want to use those, install them separately.
  • v3+ no longer supports Internet Explorer, it requires Node.js v10+ and Node-RED v1+
  • v3+ includes breaking changes from v2, please see the CHANGELOG for details.
  • v2+ includes breaking changes from v1, please see the CHANGELOG-v2 for details.

node-red-contrib-uibuilder

A Node-RED web user interface builder. uibuilder aims to provide an easy to use way to create dynamic web interfaces using any (or no) front end libraries for convenience.

The key features and benefits are: (Click to show/hide)
  • Designed as an alternative to the Node-RED official Dashboard. Without the overheads and restrictions.
  • Control everything from the Node-RED admin ui. Edit your front-end resource files, manage front-end packages. No need to access the servers command line.
  • Installs a simple front-end template that uses VueJS and bootstrap-vue by default giving you a very easy start with minimal boiler-plate.
  • Have as many custom user interfaces as you want. Just 1 node is needed for each entry point. Use link nodes to send data from other parts of your flows.
  • Has a control interface separate to the message interface. Know when a browser connects or disconnects, send cached data.
  • Much lighter in weight and more mobile friendly than the Node-RED official Dashboard (assuming you don't use Angular as your framework).
  • Finds these front-end framework packages automatically if installed to your userDir folder. Makes them available via the built-in Node-RED web server: vue, bootstrap, bootstrap-vue, jquery, moonjs, reactjs, riot, angular, picnic, umbrellajs (note this list may expand).
  • Use any front-end framework you like. Tested with at least JQuery, VueJS, MoonJS, REACT, UmbrellaJS and Riot. Simply install via the built-in library manager.
  • Use without any front-end framework if you like. Keep it light and simple. Try this out with the "Blank" template.
  • The included front-end library (uibuilderfe) provides connectivity to Node-RED and msg event handling.
  • Write your own HTML, CSS and JavaScript to define the perfect front-end user interface for your needs.
  • Edit your custom front-end code from within the Node-RED Editor, little to no need for access to the server's filing system.
  • Needs almost no boilerplate in your front-end code in order to work.
  • Simple included example works out-of-the-box, no need to install anything other than the node.
  • VueJS, MoonJS extended and caching example flows included.
  • Optional index web page listing of available files.
  • Two detailed admin info web pages are included to help authors understand where everything is and what is available.
Current limitations are:
  • You have to write your own HTML, uibuilder doesn't (yet) do it for you. This is by design. I hope to have a component design available at some point which will give additional options and make the UI building easier.

  • You have to know the front-end library locations for installed libraries and edit your HTML accordingly. The uibindex admin API (accessible from any node's admin ui) shows you all of the root folders and what the package authors report as the main entry point for all active packages. There is now also a simplified information page for the currently viewed uibuilder node instance, this is access from a button in the configuration panel.

    Note that this is a limitation of npm and module authors, not of uibuilder. Unless module authors correctly identify the browser entrypoint for their libraries, uibuilder can only guess.

  • You cannot yet compile/compress your custom front-end code (HMTL, JS, SCSS, etc.) for efficiency. This will be added soon.

    This will use a local package.json file that contains a "build" script. If it exists, uibuilder will expose a build button that will run the script.

uibuilder is rather the opposite of Node-RED's Dashboard. Whereas that is designed to make it very easy to create a UI but trades that off with some limitations, this is designed to let you do anything you can think of with any framework (or none) but at the trade off of having to write your own front-end code. This node should also be a lot faster and more resource efficient in use than Dashboard though that obviously depends on what front-end libraries and frameworks you choose to use.

Contents


1. Additional Documentation

There is a lot more information available in the WIKI. In addition, there is more technical and developer documentation in the docs folder that is also available, once you have added uibuilder to your Node-RED palette, as a documentation web site at <node-red-editor-url>/uibdocs. There is a button to that in the configuration panel. You can also access that documentation here.

2. Getting Started

2.1. Install

To install the current live version, please use Node-RED's Palette Manager.

NOTE: As of v3.1.3, npm cannot safely install the VueJS and bootstrap-vue default dependencies. If you want to use the provided default templates, you must install these yourself. Either use uibuilder's library manager or manually install from the command line:

#cd <userDir>
npm install [email protected]"2.*" [email protected]"2.*"

To install a specific development or test branch from GitHub, use npm install TotallyInformation/node-red-contrib-uibuilder#<BRANCH-NAME> from the command line on the server, having first changed to the userDir folder (normally ~/.node-red). If you just want the main branch which contains the latest development build, you can do npm install TotallyInformation/node-red-contrib-uibuilder

To install a specific release from npm, use npm install [email protected]<VERSION>. In addition to release versions (e.g. 1.2.2), you can also use latest and v1-last. Sometimes, next may also be available. Check out the Versions tab on the npm site for available versions.

NOTE: When installing uibuilder v2+, you may get a warning from the install:

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself

It is safe to ignore that warning unless you want to take control of bootstrap yourself since vue-bootstrap doesn't actually need it.

2.2. Simple flow

Once installed,

  1. add a simple flow consisting of a trigger, a uibuilder and a debug node all connected in order.
  2. Deploy the changes then
  3. double click on the uibuilder node,
  4. click on the web page url.

That will show you a simple page that makes use of VueJS and bootstrap-vue. It shows the messages being sent and recieved and has a button that inrements a counter while sending the updated count back to Node-RED.

2.3. Edit the source files

From the node's configuration panel in the Editor, click on "Edit Source Files" to see the front-end code. Make some changes to see what happens.

If you need more space for the editor, click on the button underneath the text editor. To get back, press the same button (which is now highlighted) or the Esc key.

Click on the Save button to save changes, Reset to revert to the saved file, Close to exit the editor. Note that the close button isn't available while there are outstanding changes, press Save or Reset first. The Editor's red Done button is also disabled while there are still outstanding changes.

You can create a new file and delete files and folders as well with the appropriate buttons. If you delete one of the default index.(html|css|js) files and have the Copy Index flag set (in advanced settings), the file will be replaced automatically with the default template file. Useful if you get into a complete mess.

The default included VueJS, bootstrap and bootstrap-vue packages make for a really easy to use initial setup that is very easy to use but powerful to build any kind of web user interface. The default template files should give you some ideas on how to use everything.

2.4. Install additional front-end libraries

Click the "Manage front-end libraries" button. Then click the + add button and type in the name of the package as it is defined in npm.

You can also remove installed libraries from here.

The uibuilder Detailed Information API page (link in the configuration panel) shows details of all packages installed, their URL for your html pages and their physical location on the server (so that you can track down the right file to include in your HTML).

2.5. Additional Documentation in the WIKI

Check out the WIKI for more information, help and examples.

In addition to various examples, the WIKI includes:

back to top

3. Features

  • A single node is used to define an end-point (by its URL path). The node can be included in flows as many times as you like - but each instance must have a unique URL path name.

  • Each node instance gets its own Socket.IO namespace matching the URL path setting. Note that Socket.IO will efficiently share sockets while keeping traffic separated by namespace.

    The namespace is the uibuilder url (defined in the Editor) with a preceding "/".

  • There is a front-end library uibuilderfe.min.js or uibuilderfe.js that hides all the complexities of using Socket.IO so that your own FE code is easy to write. It provides a simple event handling system so that you can subscribe to changes and process them as they happen. The default index.js file has details and examples of use. The library is written so that it can be sourced via html or included via a build step (e.g. webpack).

    Initialise the library with:

    uibuilder.start()
    

    Handling incoming messages from Node-RED is as simple as:

    uibuilder.onChange('msg', function(msg){
        console.info('[uibuilder.onChange] property msg changed!', msg)
    })
    

    Sending a message back to Node-RED is a simple as:

    uibuilder.send( { 'topic': 'from-the-front', 'payload': 42 } )
    
  • npm packages can be installed (or removed or updated) using the node's admin ui in Node-RED. This allows you to manage the availability of front-end libraries very easily. No need to have access to the servers command line. Any front-end library that is available as an npm package can be managed this way. Installed packages will be made available to your web app.

  • The node's module contains default html, JavaScript and CSS master template files that are copied to your local src folder for you to edit as required. This can be turned off via a flag. It gives you a simple to follow template that kick-starts your web app development.

  • Messages sent from Node-RED to your web app can have a msg.script and msg.style property that will dynamically add that code to the web page - if allowed by the settings (default is off).

  • Including a _socketId attribute on messages sent from Node-RED will send to that ID only.

    Note that an ID is associated with a specific browser tab and is reset when the page is reloaded.

    The _socketId attribute is added to any msg sent from the client to Node-RED. See the WIKI for more information.

  • A second output port gives access to some control messages.

    This allows additional processing when a client connects or disconnects, an instance is (re)deployed or there is a socket error.

    A common use for this is to send cached information back to a newly connected client (or one that has had the page reloaded).

    Other uses could include outputing some standard information when a new client connects. Or you could use the information to keep utilisation metrics. See the Control Message Structure page in the WIKI for details.

  • On deployment of the first instance of uibuilder, a new folder is created within your Node-RED user directory (typically ~/.node-red) with a fixed name of uibuilder.

    If you are using Node-RED's projects feature, the folder will be created within your project folder instead.

  • On deployment of any new instance, a new sub-folder within uibuilder is created.

    The name is the same as the URL path specified in the node instance's settings. (defaults to uibuilder). src and dist sub-folders are also created. The url name is limited to a maximum of 20 characters and cannot be templates as this is reserved.

    The files in these folders can be edited from within the node's configuration panel in Node-RED's Editor. No need for command line or other file access on the server.

  • If the local dist folder contains an index.html file, the dist folder will be served, otherwise the src folder will be served. This allows you to run a build step (e.g. webpack/babel). The WIKI has instructions on how to do a build step.

  • Any resource (html, css, js, image, etc) placed within the dist/src sub-folder is available to the browser client. The default URL would be http://localhost:1880/uibuilder (where the path is set as per the point above). That URL will load index.html. Resource URL's take the httpNodeRoot Node-RED setting into account.

  • An additional "common" folder is created in the uibuilder root folder (e.g. ~/.node-red/uibuilder/common)

    This is made available to each node instance and is used to make common resources available to multiple web apps.

    See the URI Paths page in the WIKI for details of all URI's available to your web apps.

    Better still, see the uibuilder details and instance details buttons in the uibuilder configuration panel in the Node-RED Editor, these will show pages of more detailed information.

  • Some VueJS helper functions are now included with the front-end library. The idea being to bridge the complexity gap between the Node-RED Dashboard and uibuilder for novice front-end programmers. See the technical docs for details.

back to top

4. Known Issues

These are things to be aware of & that I'd like to tidy up at some point.

  • v3.0.0 does not have a completely working security model. It is not fully tested and may not work. Do not use this part in production. Everything else is fine.

  • Some of the VueJS helpers in the front-end library have edge-cases where they don't work.

  • Socket.IO isn't secured by default Use uibuilder's ExpressJS and socket middleware feature to secure things properly before considering use over the Internet. ALWAYS configure TLS before configuring authentication. If Node-RED is using HTTPS, Socket.IO will also use HTTPS/WSS encryption of traffic.

    Note, however that the socket middleware is only called on initial socket connection. Once the connection upgrades to websocket, this is no longer called.

    I hope to improve this in a future release.

    You could also work around this by using a proxy such as NGINX or HAproxy to be the TLS endpoint. Just make sure you proxy the websocket traffic as well as the standard web traffic.

    See the security documentation for more information.

back to top

5. Discussions and suggestions

Use the Dashboard category in the Node-RED Discourse forum. This is the best place to have a discussion or ask a question.

Alternatively, use the GitHub issues log for raising issues or contributing suggestions and enhancements and the GitHub Discussions page for general questions, suggestions, etc.

Please note that I rarely have time to monitor the #uibuilder channel in Slack any more, it is best to use Discourse or raise an issue.

I do try to look out for uibuilder related questions on Stack Overflow but again, time does not always let me do this.

6. Contributing

If you would like to contribute to this node, you can contact Totally Information via GitHub or raise a request in the GitHub issues log.

Please refer to the contributing guidelines for more information.

7. Developers/Contributors

Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.

profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&A sites

Please also check out my blog, Much Ado About IT, it has information about all sorts of topics, mainly IT related, including Node-RED.

back to top

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].