HTML node and uibuilder node

General
1

Hi ! I need some help, I use html node, I use it to have all the html code of a http request node which have a link. But Now I want to take this hmtl I have to use it on a Template node or Uibuilder node, someone know what can I do that ?

2

Hi and welcome to the forum.

A request node will reach out to another web resource and get it (or post to it, etc), it doesn't present a web page. The core nodes for that are a combination of http-in, template and http-out.

Regardless though, if you have some HTML from any source and you want to use Node-RED to serve it up, you have 3 main choices:

  1. If the web page is completely static (doesn't change), you can use the httpStatic setting in settings.js to define a folder. You put your HTML and other resources (images, etc) into that folder and they become available via Node-RED's built-in ExpressJS web server.

  2. The afore mentioned combination of http-in, template and http-out.

    This lets you build web front-ends fairly easily and gives you access to the use requests, headers, etc should you need them. But it doesn't give you dynamic data exchange, you would have to set that up separately with websocket nodes and custom front-end code in the template. Neither does it give you easy access to 3rd-party front-end libraries and frameworks.

  3. uibuilder.

    In this case, you define your front-end web resources in files (that you can edit from Node-RED via uibuilder node). You can install additional front-end libraries (jquery, etc. VueJS and bootstrap-vue are installed for you) that uibuilder makes available for you.

    But you also get a websocket connection defined for you that is very easy to use on both ends (in Node-RED you send a msg to the node, on the front-end there is a simple function that watches for incoming messages and lets you easily process them).

So #3 is the most dynamic and flexible of the 3. #2 is still simple to use for reasonably simple tasks and has the advantage of needing no other nodes installed. #1 is the least dynamic but is very simple to use.

Depends on your actual requirements as to which approach would be best for you.

3

Thank you so much I appreciate it ! The third one is the best way for my project.

4

Great to hear that you want to use uibuilder. I'm always trying to find time to work on it but of course there are always more ideas than time to implement them :grinning:

I'm currently trying to create a flexible generic table display/edit component in VueJS/bootstrap-vue. Eventually, I hope to add that into an add-on package that will include other components like the dynamic SVG/overlay component produce a while back.

I'm also (sometimes) working on a big security update for uibuilder that will give you the ability to secure your user interfaces properly with hopefully not too much effort - that's a major piece of work that will probably take a while.

And I also started work on a better caching mode to make things simpler. However, getting the actual caching right without losing data is a challenge. Of course, you can do caching yourself in a function node which is what I normally do.

That is along side the actual Home Automation stuff I like. I'm rebuilding my entire setup at the moment.

And all of that is squeezed into my non-work time. Phew, I'm exhausted just writing it down!

Anyway, I wouldn't do it if I didn't love it so it is great to see other people making good use of it all. Don't hesitate to reach out if you need any help.

5

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