Multiple Custom Third-Party Nodes

Dashboard
1

Hi all, I am trying to create some custom nodes for an intergration the dashboard into an existing solution. The issue is, is that when creating custom third party widgets, as per the documentation (Building Third Party Widgets | Node-RED Dashboard 2.0), there is no documentation on how to include multiple widgets within a single package. As our goal is to create a lot of widgets that will intergrate with the sytem it would be unreasonable to install all of those widgets as single packages.

What I have done:

  • 2 Test items created (Vue file and HTML and JS file as per example repo)
  • I have tried to export mulitple libaries in the "vite.config.mjs" file under the lib section, this will throw an error due to the umd files.

Everything is standard code from the example repo, and will compile and run individually.

I have also tried to add multiple widgets in the package.json file

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

This won't work as the vite.config.js file will only export one file as previously mentioned

So then I tried this:

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

This would allow me to render exampleOne but an error will be caused when trying to render exampleTwo.

Any help would be much appreciated.

2

Is this related to FlowFuse? Seems only Dashboard.

3

Should I move it to the dashbord topic then? If so my apologies.

4

I would expect your second example here to work. I'll need to investigate, and come back to you.

5

No worries, not all members of this forum use FF - so if the topic is bad referenced you may not get an answer.

6

If it helps here is the error I get with exampleTwo.

TypeError: Chaining cycle detected for promise #<Promise>
    at index-TznpjNEy.js:47:47130
    at async index-TznpjNEy.js:47:47138

Where the index-TznpjNEy.js is the file under dashboard/assets on the pages dashboard

7

So, I have done some digging. It appears that the error stems from the 'vite.config.mjs' file. More specifically the "name" component under the "lib" section of the export. This name has to match name of the component registered with Node-Red. The issue arrises because one cannot have multiple names under one export, thus causing the error. I am going to look into this further and try and find a work around.

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.

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.