Getting started with uibuilder and React?

General
21

Hi Julian,
Thanks a lot for such a quick and detailed response. I will follow these instructions.

I do see that clicking on the "open page " button in the uibuilder node's configure window will start a new client. But.. is there a way I can start a client automatically (through the flow) without clicking on that button? May not be a straightforward way but... even a more complex way will do.
And.. Please suggest if this is not the right topic to post this message.

22

Hmmm .... well kind-of. The issue is that you need to start a new browser window or tab. That is a client-side task which, naturally, most client OS's will be reluctant to give control over to a "foreign" server (think of the mayhem that could be caused by some code slipped into a random web page).

So you need something that will connect the Node-RED server to the client OS where you want the new window/tab to appear. How easy that is partly depends on whether Node-RED itself is running on the same client. If it is, you can easily run a command via the exec node to start a new window at least (not sure about a tab, may be possible to open a tab on the last active browser window, not tried).

If Node-RED is running on a different device to the browser, things are rather harder. Now you will need some kind of service running on the client that Node-RED can talk to. That could even be Node-RED of course. Or you could potentially use a system automation tool such as AutoIT (Windows, Mac and Linux will have equivalents). In this case, the final piece of the puzzle will be networking. If both devices are on the same network, that should be fine. If they aren't, you will need something to carry the message across the different networks either by exposing the client to the other network (generally not a very good idea) or by using a transport that can traverse networks such as email or a bot on a messaging service like Telegram. MQTT would be another possibility and likely a lot better since this is exactly the kind of thing a message queue application is good for.

23

Hi Julian,
Thanks for such a quick and extremely detailed response. The browser needs to be started on the same client where the node-red is running.
The idea is to start a browser window automatically (for uibuilder) and use one to one communication (may be using msg._socketId) between that browser window and the uibuilder instance. or... are there any existing nodes that can do this already?

24

No problem. Beats trying to get my brain to think about complex work issues late on a Friday.

So, as NR and your browser are on the same device, this is easy. The exact command to feed into an exec node depends on what browser you are using though.

For the new Microsoft Edge browser on Windows, it is especially complex (of course it always is with Microsoft!) as that is installed as a universal app:

start microsoft-edge:http://localhost:1880/uibuilderurl

or

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" http://localhost:1880/nr/vue-file/

On my system, that opens a new tab on the last used browser window, I think that you can force a new window by using the startup parameter --new-window.

Chromium command line startup parameters are here (not all may work on Chromium Edge):

https://peter.sh/experiments/chromium-command-line-switches/

When you create the new window/tab that loads your uibuilder web app, the uibuilder front-end will send some control messages to Node-RED and you can use those to add to any messages that you want to send back to that front-end.

Note that you don't need to do any of this of course if it is only you using the app, by default uibuilder will send to all connected clients so if you only have one then don't bother messing with the socket id.

25

Hey folks ,
Groovy progress here.

I have setup react and can click a button and send back into node-red uibuilder node and output it to a debug node.
BUT thiis is after react dev that yarn build copy build to src of where uibuilder expects it and then see if it works.

So Is it to my proper understanding that's the only way?
does anyone know or could it be possible to develop in react dev methods hot reload etc and see changes at the uibuilder url .

I though I could communicate with node-red from development react but the socket.io stuff timeout and keeps retrying.

any insight appreciated and I will report back if I magically find a way

26

That is one of the reasons I avoided REACT as the default template. Virtually all examples with REACT use a build step whereas most components and many examples for VueJS don't need a build.

So you need to build and then reload your web page.

You can certainly set up your build environment to watch for changes and auto-rebuild.

In theory you could also build something that caused the browser to reload the page as well. One way might be to trigger a web hook at the end of a successful build. The other end of the hook would be in Node-RED which would send a msg to uibuilder that you could then use in your code to trigger a reload. Just remember that reloading looses all of the data in the browser so you would either need a caching node (function node, example provided with uibuilder) or set up a browser variable store.

27

Hey thanks,
Yes of course adjust the dev to build, as well if necessary react can be used without build tools. React has the createElement which jsx is syntactic sugar for, so babel could be dropped.
Cheers

1 Like