Not sure how many people are following the development of the v2 branch of uibuilder? This is a massive update and is taking much longer than I'd hoped. However, I think you will find the wait well worth while.
Anyway, after a bit of a break due to family and work commitments, please note that there is an updated development release that should be stable enough to play with.
It would be great if some people gave this version a hammering so that I can kill off any bugs I've not spotted
To install: npm install TotallyInformation/node-red-contrib-uibuilde#v2 --save but note the breaking changes and limitations. Please don't try to use this with a version of Node.JS below 8.5.
Please note the changelog for breaking changes. There are a few of them I'm afraid though in many cases, you might not need to change anything. The change to the location of the socket.io client in your index.html file is probably the one everyone needs to do. Just create a new flow to get the latest default front-end files index.(html|js|css) so that you can see what has changed.
There are a few things that don't quite work fully as yet:
Package management. You can see packages that are enabled but you can't yet add/remove them from the admin ui. Note that you no longer need any settings to tell uibuilder what packages to use! It will find any installed common packages ('vue', 'bootstrap', 'bootstrap-vue', 'jquery', 'moonjs', 'reactjs', 'riot', 'angular', 'picnic', 'umbrellajs') and automatically make them available. If you need to use something less common though, I'm afraid you will need to wait a bit longer. Of course, you can also let me know if you want anything adding to that list.
File editing works from the admin UI - no more messing around trying to edit remote files on the server, Node-RED's standard ACE editor component is used. However, you can't yet create new files or delete any.
The installed packages list isn't yet under the "Manage front-end libraries" button - that is just for convenience while I'm still changing it.
Unfortunately, ExpressJS middleware isn't working at the moment. So if you rely on the middleware v1 made available, you will need to wait for a future dev release I'm afraid.
npm ERR! path /home/administrator/.node-red/node_modules/node-red-contrib-uibuilder/bin/mergehtml
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/administrator/.node-red/node_modules/node-red-contrib-uibuilder/bin/mergehtml'
npm ERR! enoent This is related to npm not being able to find a file.
I am trying to get something working, but the default uibuilder with vue does not appear to be working. I do receive data from the page towards node-red, but the vue bindings in the page won't load, because the whole /uibuilder/vendor/* directory does not exist, so no libraries.
Also in the editor, the "installed packages" shows the vue, bootstrap-vue etc, this part is confusing to me. If I want to use jquery instead for example, i click add and then i have to fill in a field, with what exactly ? Then click "install" ?
Personally I like to build mostly from scratch/vanilla, just be capable of receiving/sending messages and code the rest myself, too much overhead in bootstrap stuff.
These don't exist on the fileing system with that name. The vendor URI paths map to folders in the ~./node-red/node_modules folder. If you use the details link from the admin ui, you will get a page that shows you the mappings:
Sorry, I was trying to get this out earlier but thanks to paying work getting in the way, I didn't get a chance to update my previous post.
Re Vue/bootstrap - What I found was that the combination of Vue & bootstrap-vue/bootstrap gives a much better beginner experience out-of-the-box. So that has become the default, especially after I found that performance is still better than jQuery. You don't have to use them at all if you don't want to and you can remove any that you don't need.
That is part of what isn't working yet I'm afraid.
However, you can absolutely still manage the packages manually as well.
Just note at the moment, that if you want to use a library that isn't in the list that I gave, you will either need to wait or ask me to update the code with the library name.
If you think that it is important to be able to manage packages (other than the ones I recognise in the code) manually in the longer term, let me know and I will need to go back to creating a file that contains the list so that you can expand it yourself. Personally I'd rather not do that since I think it is confusing for inexperienced people and the admin ui is a more Node-RED style of doing things. However, I will continue to think on it. Let me know what you think.
To install manually, simply install any front-end library packages in the normal location userDir which is normally at ~/.node-red/.
cd ~/node-red
npm remove vue-bootstrap bootstrap
npm install jQuery
That is part of what isn't working yet I'm afraid.
That explains got it.
Re Vue/bootstrap - What I found was that the combination of Vue & bootstrap-vue/bootstrap gives a much better beginner experience out-of-the-box. So that has become the default, especially after I found that performance is still better than jQuery.
Jquery was an example, not really up to standards anymore. Lots of things can be done with vanilla js. But I can see vue for the javascript part. I will remove bootstrap.
Thanks.
Remove them all if you like The uibuilderfe.js library gives you simple event management for incoming messages and if you are able to only use the latest browsers or use a build step, you can certainly do whatever you want without any framework. Even Vue is only a convenience for people without the core skills or time to do things themselves (like me!).
Incidentally, v2 will include (if I can get it done in time) a convenience interface for doing a build step on your front-end code. That will be controlled from a package.json file in the instance root - e.g. if you have a standard install and have a uibuilder node with the url test, the package.json file would be in ~/.node-red/uibuilder/test (assuming you aren't using Node-RED projects). You will be able to include a "build" script in the package.json and be able to run that from the uibuilder admin ui.
Hey @TotallyInformation, you got a new beta tester! After your message on Slack I figured I would have a try at v2.
So far the transition is going pretty smoothly, except for the next part:
One of my UIs depends on vue-resource. As you said as of right now there is no way to add modules to be served. I understand that a config file might not be ideal and that managing exposed modules directly in the node configuration makes more sense. Maybe for now a mix of both could work as a workaround?
For now I'll just add <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> to my interface
Thanks for all your hard work, the uibindex page will be very helpful to everyone using this module.
Cool library. Of course there are millions of Vue extensions so I won't be able to include everything in the master list.
I will have another look and see what is best. I may be able to do something simple with a file. Though I really want to get the main interface working so it isn't necessary.
Watch this space sadly rebuilding work at home and organisation building at work is leaving me very tired in the evenings so development as somewhat slowed down temporarily. I'm itching to get v2 out the door though so I'll be on it as soon as I can.
Of course, that is sensible and you can pretty much use any npm library from cdn these days.
Thanks for the encouragement! Though I can see many people downloading uibuilder, it is impossible to know how many people actually use it so having feedback like this is really important. If you can be bothered, it would also be nice to get a few more ratings on the flows site
got it.
The uibuilderfe.js library gives you simple event management for incoming messages and if you are able to only use the latest browsers or use a build step, you can certainly do whatever you want without any framework. Even Vue is only a convenience for people without the core skills or time to do things themselves (like me!).
sadly rebuilding work at home and organisation building at work is leaving me very tired in the evenings so development as somewhat slowed down temporarily. I'm itching to get v2 out the door though so I'll be on it as soon as I can.