The uibuilder node here points to '../uibuilder/vendor/vue' folder, but after searching it in my entire /data folder neither a vendor, nor a vue folder is to be found.
So, how in the world does the uibuilder vue 3 example work?
I'm probably blind, but couldn't find any enlightenment in the documentation.
Can someone point me how the mechanisms actually work?
I've been thinking about adding a minified pdf.js library and make use of it in a uibuilder page*
Would be the best way to do that?
By simply placing it somewhere in the uibuilder folder and referencing to it from within the index.html or is the subfolder vendor important to make use of it?
Cheers,
Marcel
Edit: Instead of forcing to somehow make the pdj.js library work within uibuilder, should I rather think of creating an NR extension instead? Actually, I'd like to get these examples work in Node-Red: PDF.js - Examples
Front-end libraries are installed to the uibRoot folder which typically will be /.node-red/uibuilder/. So you will find the node_modules sub-folder in there and that is where the physical files live for any installed front-end libraries.
As it says on the library manager tab, uibuilder attempts to ESTIMATE the entry point for each library. However, many libraries do no correctly specify an entry point and so it is always a bit of guesswork and you may need to refer to the library docs to work out the correct URL reference.
Yup. The library manager runs npm behind the scenes, anchored to the uibRoot logical filing system folder. This keeps front-end libraries completely separated from any node-red libraries. The uibuilder module automatically mounts every installed library by adding an ExpressJS route to the <uibRoot>/node_modules/<libraryname>/ folder. So all the files in an installed library are actually accessible to the browser. Each of those folders is mounted to a URL: ../uibuilder/vendor/<libraryname>/. A relative URL is used because Node-RED has a lot of flexibility in how it can present itself in terms of URL's. Using relative URL's avoids all those issues.
The "Full Details" web page shows all of the gory details about what ExpressJS web paths are mounted and where they point to in the filing system (amongst other details).
This IS all in the documentation somewhere! But there is a lot of documentation these days so might not be obvious. Let me know if you can think of any documentation improvements.
The best way is to find a library on npm and install it via uibuilder's library manager.
Then reference it from your uibuilder-supported web page(s).
The ../uibuilder/vendor/ part of the URL is critical to any library installed via the library manager. Think of the library manager a bit like using a CDN but local instead of across the Internet.
If you really only wanted to have a static copy of a single file (really not recommended since you would have to remember to manually look up whether it needed to be updated), you could simply place that file in the same folder as your index.html file. Or, if you wanted it to be available to all uibuilder instances, you could place it in the <uibRoot>/common/ folder.
The easiest way to use those examples as presented would be to start with the ESM version of the client library by using the ESM template:
OK, worked it out with a bit of sleuthing. Simply add the <canvas> element from the example to your index.html file. In your index.mjs file, start with:
/ See import map in index.html for import shortcuts
import { uibuilder } from '../uibuilder/uibuilder.esm.min.js'
// Load the pdf.js library directly from the Mozilla CDN
import 'https://mozilla.github.io/pdf.js/build/pdf.mjs'
// We have to work out if the generic import actually created a global variable automatically.
// We need to look for the global variable 'pdfjsLib'.
// console.log('globalThis', globalThis)
// HINT: It did do the correct thing.
// ... the rest of the file can be the same as the example js
They only provide an ES Module version pdf.mjs which is why we are using uibuilder's ES Module version along with an import statement which is more consistent. You could also do it the way they did in the example, using a <script ... type="module"></script> as long as it is loaded before the index.mjs file. But really, if you are going to use ES Modules, best to do it properly as I've shown.
I would also note that if you check your browser's dev console, you will probably find, as I did, that the example does not quite work correctly due to CORS security issues. These would go away if you use the locally installed npm module pdfjs-dist. See the following pages for more detail:
