Combine vite vuejs project with dashboard-20

Dashboard
1

Hi,

I have created a Vite Vue.js 3 project, and with the help of vite-plugin-singlefile, I can build the project into a single file. What I want to do is serve this file with the dashboard-20 template node.

I can't get it to work. My single file is a standalone, full HTML with minimized JS and a body tag like this:

<body>
  <div id="app"></div>
</body>

I selected the template group and tried all the types, but nothing seems to work. Has anyone tried this before? What am I missing?

Thanks in advance.

Regards,
Nuri

2

may i know how exactly you tried to do it?

you took a ui-template node and inside within tag pasted your standalone file ?

3

Yes. I build the code into single file html. I copy and paste this html into dashboard-20 template node. I did it like this with standard template node and http in nodes before.

4

Do you need the support of D2? Or would UIBUILDER be a better approach given that it would offer support without the complexities and overheads of D2?

UIBUILDER allows for a build-step and lets you switch from a default src un-built version to a dest (or other folder) built-version. Currently, you would do the build process outside Node-RED itself though there are plans in the backlog for the uibuilder node to pick up defined script's in your uibuilder instance folder's package.json and offer buttons in Node-RED to run the build.

UIBUILDER: Front-End Build Steps and Tools

5

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