Fix vite build breaking mechanism to provide extra resources for the editor

ralphwetzel commented 4 days ago

Description

When building a widget for Dashboard-2, vite places the resulting file into the /resources folder:

https://github.com/FlowFuse/node-red-dashboard-2-ui-example/blob/a5f443e290a4d453dac46e6ad9b9845dcc5958d9/vite.config.js#L26-L27

Unfortunately, as it's documentation states,

by default, Vite will empty the outDir on build if it is inside project root.

This is unfortunate, as it deletes as well all (other) files existing in /resources, thus breaking the mechanism to provide additional files to load into the editor as extra resources.

Change Proposal

Rather than building directly into /resources, vite shall build into ui/dist directory.
The resulting file will then be copied into /resources.
The operation will be performed by vite-plugin-static-copy, added as dev-dependency.
To compensate for an error when trying to require an ESM only module, vite.config.js has to be renamed to vite.config.mjs.
Took the opportunity to fix as well the repo path in package.json, still pointing to a flowforge repo, non-existing.

Checklist

[x] I have read the contribution guidelines
[ ] Suitable unit/system level tests have been added and they pass => N/A

joepavitt commented 3 days ago

I'm thinking the result is better served into a /dist folder? Rather than nested inside /ui? I like /ui being the source code only - thoughts?

ralphwetzel commented 3 days ago

I like /ui being the source code only - thoughts?

The reason I proposed to put it into /ui was a similar one: All widget related stuff should stay in /ui, whereas the rest of the structure is "standard NR". 😉 Surely I can agree on your view either. Additionally, I'd propose to remove dist/* from the files section in package.json:

https://github.com/FlowFuse/node-red-dashboard-2-ui-example/blob/a5f443e290a4d453dac46e6ad9b9845dcc5958d9/package.json#L28-L33

joepavitt commented 3 days ago

All widget related stuff should stay in /ui, whereas the rest of the structure is "standard NR".

Good point, well presented. Will review and play with this tomorrow before merging, but provisionally, looks good.

FlowFuse / node-red-dashboard-2-ui-example