Uibuilder + react

[EchoSmith]

Hello,

I am trying to setup React with node-red using uibuilder and have been following this guide.

GitHub - gaillarddamien/uibuilder-react-example

But it seems to fail the build process and cannot locate the uibuilderfe module. I check the folder and it is located there and npm install did install the package. I have also tried this example and I get the same issue.

Example: ReactJS

I am trying to get this build in a docker image but thought I would try remove that complexity to see if I could get it running outside of docker but still no luck.

I have also tried running npx browserlist@latest --update-db, but that did not fix the issue (not that I was expecting it to).

I am not sure what else to try and hope someone can assist me getting past this or point me to a forum post that has already discussed this, however I have not seen anything covering this issue here.

[UnborN]

In uibuilder's folder you'll see that all front-end libraries are in
node-red-contrib-uibuilder\front-end (like you screenshot shows)

but in your code, in file UserData.js you try to load uibuilderfe.js from \front-end\src
edit the file and remove src and also try to load uibuilder.esm.js instead ..

import uibuilder from 'node-red-contrib-uibuilder/front-end/uibuilder.esm'

uibuilderfe.js is the older library possibly deprecated in the future

[EchoSmith]

Thanks for the prompt reply, I will give that a try and let you know if that fixes my issue.

[TotallyInformation]

There appear to be a couple of issues with that repo you mention, firstly, he has used a local install of uibuilder, it is best to use the published version.

And, as Andy say's, import uibuilder from 'node-red-contrib-uibuilder/front-end/src/uibuilderfe' is not correct.

In fact, I don't recommend importing the uibuilder library at all, exclude it from your build step and access it as a remote script resource as normal, using this in the head section of your HMTL file: <script defer="" src="../uibuilder/utils/uibrouter.iife.min.js"></script>.

On modern servers and browsers, there is almost nothing to be gained by building the library into your built code, especially when that is split into chunks anyway as his example is. By accessing it directly, it is also easier to maintain since an update to uibuilder immediately gives you the update in your web apps without needing to rebuild everything.

PS: Only use the ../uibuilder/utils/uibrouter.esm.min.js version of the library if you are loading your react code as an ES Module, that would be the only reason to include it in your top-level js code. Mostly, the IIFE version is a lot easier to work with because it is "just there" in the global (window) context.

[EchoSmith]

Thanks for the info, I really need to dig into the documentation to full understand what I am doing. I am still new coding and trying my best.

I am still having issues getting a fresh reach app to pick up a simple checkbox and output it to node-red.

All I really want to do is attach this fnSentToNRcheck into my HTML like this.

<input type="checkbox" value="test" onchange="fnSendToNRcheck(event)"/

Once I get past this I can build my react app and when I need user input I can plug in that function and see the event in node-red.

I am not sure on what the implementation of ES and IIFE are, but I am going to have to do some research.

Thanks for all the help, and I will be doing some looking around in here for some answers.

UIBUILDER Documentation v6

[TotallyInformation]

No problem, we all have to start somewhere. Though I have to say that if you are starting with REACT, you've given yourself some initial headaches because it is not a simple framework. Typically, REACT is good for large-scale developments with big teams,

So if you want to - at least temporarily - simplify things for yourself while you are learning, I would recommend creating a new test uibuilder node just using the "blank" template. This will let you add a checkbox much easier. Also, I don't think checkbox inputs support the value attribute, they use checked instead. I've actually greatly improved the uibuilder.eventSend function in v7 (not yet released) where it will better handle checkboxes, and similar inputs.

@EchoSmith

I am not sure on what the implementation of ES and IIFE are, but I am going to have to do some research.

IIFE is a way of controlling the impact of custom code on the browsers global window context. In the case of uibuilder, it simply means that you can just add the script tag as shown in the default index.html and the library initialises itself and creates the global uibuilder, $, and $$ objects. It is the simplest and quickest way of using a library.

ESM = ECMAScript Modules - this is the "new" way that will be the future standard way of using libraries (modules) in the future in both the browser and Node.js. Unfortunately, until you've learned your way around them, they are not quite as easy to use.

When using big frameworks such as REACT, they appear to be using ESM (e.g. they using import statements to load modules). However, this is not really true. What they actually do is force you to use a "build step" using a build tool than converts the ESM-like code into IIFE. It is that converted (built) code that you actually then load into the browser.

So using a framework adds several orders of magnitude of complexity to designing and building your front-end UI.

Of course, in the past, this was likely necessary because native HTML and CSS did not have all the capabilities that are required for building full-featured web apps. However, that isn't really true any more which is why uibuilder, over the last 10 years, has ditched any previous framework dependencies and now uses entirely native HTML, CSS and JavaScript. So uibuilder is not considered a "framework" itself, the front-end library is merely an enhancement of native capabilities.