New home dashboard using uibuilder and bootstrap-vue

Not quite, you can access bootstrap-vue via a CDN if you like (an internet location that serves standard libraries - details on the bootstrap-vue website). But, if you've installed it via npm to your userDir folder (usually ~/.node-red) along with vue itself, then the link given points to the version that you installed.

uibuilder takes the modules that you've listed in the settings.js file and creates URL's for them. So if you are running Node-RED on localhost with the default port, you would have a URL http://localhost:1880/vendor/bootstrap-vue/dist/bootstrap-vue.js available, this is what you are putting into the html file.

I just miss off the http://localhost:1800 part because then it doesn't matter if you take your test setup and move it to another, perhaps live/production, location. It also won't matter if you move it from a test server that doesn't have https to a live one that does. It also won't matter if you change the Node-RED url httpPrefix or change the name of the uibuilder url, the links will still work.

All of the modules you list in the settings are added as paths with the vendor prefix so that their front-end components are available to your front-end code.

When you see relative URL links in examples on the Internet, you generally see them written simply with no leading /. That works in exactly the same way but it is very easy to make a mistake and end up with the leading / which points to somewhere different. Putting ./ on the front is, in my view, a lot clearer about your intent.

1 Like