Using uibuilder with vite

[TotallyInformation]

Hi, welcome to the community and thanks for using and contributing to uibuilder

@newonejoe

Main issue with webpack approach

Yes, I agree. webpack isn't actually that good. However, I've recently done some work with Snowpack and I can say that, not only is it a lot easier to work with, it also DOES work nicely(ish) with Node-RED and uibuilder.

If you have the vNext build of uibuilder installed, you can access the snowpack info from the tech docs. Otherwise, here is the link to the document: node-red-contrib-uibuilder/front-end-build-snowpack.md at vNext · TotallyInformation/node-red-contrib-uibuilder (github.com)

You may also note that this new version of uibuilder has a built-in development capability - though currently only for when you edit code via the Editor, not if you are using VScode or similar (I'll be implementing that for a future release). So ultimately, you won't need a development server such as the one built into webpack or snowpack except for the rebuild part.

@newonejoe

Main issue with vue/cli created project - the path src(eg src="/index.js") in the dist/index.html is not compatible to uibuilder, you have to change it to (src="index.js") or (src="./index.js").

Why is that an issue? When working with any web server, you have to specify URL's for resources. Node-RED/uibuilder is actually easier in this respect since you can use the ./index.js relative reference and that will continue to work even if you copy to a new uibuilder node or change the url or turn on/off https.

@newonejoe

Main issue with CRA (Create-React-App)created project - difficult or danger to change webpack config directly.

I don't quite understand - you mean that you have to change the config of webpack from what appears in a tutorial? But that is common anyway isn't it - needing to change the build config to match your deveopment/production environment? Or have I misunderstood?

@newonejoe

use vite

You will see Vite listed in the front end builds page of the uibuilder tech docs. But I've not used it so can't comment on how well it could be made to work with uibuilder.

@newonejoe

Step 4: open localhost:3000/vue-app. Attention, must add the folder name in the url end, or there would be socket.io-client invalid namespace issue. This is a trick to handle the url check in the uibuilder.js.

To use this method, you have to pass the appropriate start parameters to the uibuilder front-end library. But you probably also have to fix your dependency URL's.

@newonejoe

With Step 1 to Step 4, we can already have a fast developing and testing experience.

As always, uibuilder tries to ensure that you are not locked out of using your standard web development tools for developing the front-end.

@newonejoe

For the code behind this, refer the github link.node-red-uibuilder-vite-template

Cool, thanks for sharing that, very useful.

@UnborN

I didnt find a use for doing a seperate install in the application folder for uibuilder or for socket-io-client
.. all i did was load uibuilderfe directly from its node-red path. This way i always get a matching version to whatever is installed in NR.

I generally recommend that you at least leave the socket.io client library alone. As you say, you need the matching version for the server. Bundling this really doesn't get you any performance boost and just makes it hard for your build process to track down the correct client version.

@UnborN

the advantage of running a dev server is that it gives you the reload features whenever you make a change in the source files ? but it does complicate things (different port) so i chose to just build the app again with the --watch parameter which more or less does the same.

This is effective for smaller builds, probably not so much for really complex ones. I'm planning to add the watch feature to uibuilder later this year. If you edit via the Editor, you already get it.