npm node-red-contrib-uibuilder 2.0.0
New major version - BIG changes!

latest releases: 6.8.2, 6.8.1, 6.8.0...
4 years ago

The list of changes between v1 and v2 is very large, please check out the README and the CHANGELOG and their pointers to further details.

Please note that you will need node.js v8.16 or above to make use of the new version. You will also need a reasonably up-to-date version of Node-RED.

If you have been using builder v1, please take careful note of the breaking changes. You will need to do some minor changes to code and configuration when moving up to v2 I'm afraid.

If you need a flexible web app that uses Node-RED to do the heavy lifting and communications, then please do check out uibuilder 62.

There were several drives for such a large rewrite:

  • Tidy up and simplify the code-base making it more efficient and robust
  • Make the code more maintainable and flexible
  • Deliver key new features not previously feasible:
    • Built-in code editor
    • Built-in package installer
    • Simplified and improved configuration options
    • Support for Node-RED projects
    • Move from jQuery to VueJS for the default template
  • Open up options for improved security
    • Open up the code to enable future improvements, including
    • Further security enhancements
    • Provide a "build" step for your custom front-end code
    • And much more

From the readme, here is a summary of the features of uibuilder v2:

  • 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 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 and makes them available: 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 2, MoonJS 2, REACT 2, UmbrellaJS and Riot.

  • Use without any front-end framework if you like. Keep it light and simple.

  • The included front-end library 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.

Don't miss a new node-red-contrib-uibuilder release

NewReleases is sending notifications on new releases.