Multiple Custom Third-Party Nodes

Dashboard
8

I have found a workaround to the problem. Altough this is kind of hacked together, it works and is only complicated in the build process with one extra step.

Thus, to create multiple Third-Party widgets for the Node-Red Dashboard 2.0, you need to generate a umd file for each widget.

Soltuion:
Run a for loop in powershell dynamically changing the library name so that it will have the correct name and be well organised.

To complete this:
In the package.json file

"node-red-dashboard-2": {
        "version": "1.0.0",
        "widgets": {
            "exampleOne": {
                "output": "exampleOne.umd.js",
                "component": "ExampleOne"
            },
            "exampleTwo": {
                "output": "exampleTwo.umd.js",
                "component": "ExampleTwo"
            }
        }
    }

It is done like this, as we are dynamically generating a umd file for each widget. We like doing it this way because as you will see it will allow us to not have overlapping code and each widget will only run what it needs.

Secondly what we have done is moved the exporting of the widgets to individual files
eg. for ExampleOne
./ui/exports/exampleOne.js

export { default as ExampleOne} from "../components/Widgets/ExampleOne.vue";

We have called the file exampleOne.js so that we can easily reference the file as it will be the same name as the library name.

Then for the vite.config.mjs, the file is the same as the GitHub - FlowFuse/node-red-dashboard-2-ui-example: An example project for writing third-party nodes that integrate with Node-RED Dashboard 2.0 repos file, with one minor change

const LIBRARY_NAME = 'ui-example'

is now

const LIBRARY_NAME = process.env.WIDGET_NAME

This will allow us to create an enviroment variable through powershell and change the values we need.

Powershell:
I called my file build.ps1 and to run it, in the command prompt cd to the directory where the project is located. This is where you would normally run the npm run build command.

Once youre are located in the directory run the build.ps1 file:

$widgetsToExport = @("exampleOne", "exampleTwo")

foreach ($i in $widgetsToExport) {
    <# Set the enviroment variable to be able to change the LIBRARY_NAME in the config file #>
    $env:WIDGET_NAME = $i

    <# Build the file #>
    npm run build
}

This will generate the needed umd files bypasses the errors trying to do it all at once.

Note: I have removed the exports section from my package.json file as of this time. It was not needed for my local tests of the system, however, it still may be needed when packaging the package, so you would also need to add all the umd/esm files back if that is the case, as per the example repo.