Node-RED

Creating ui from node-red without using uibuilder

General
#1

i want to create web pages without using uibuilder. flow after starting would call web page take input and get back to node-red. how can i do it?

#2

You can register arbitrary HTTP endpoints using the HTTP in node. Where you load the webpage from is entirely up to you, these could be template nodes inside Node-RED, static files in the file system or other external sources.

There are some examples in the cookbook.

NOTE: I moved your topic, as this is not related to core development.

#3

@kuema cant i create custom node for it.

#4

Yes, basically, you could do that in a custom node, too.

Uibuilder is an example of how it could be done.

1 Like
#5

it is pretty complex to understand and replicate in custom node. is there any easy way?

#6

What part of uibuilder don't you like? It would be much better to improve 1 Node than to have several that only do part of a job.

Or if you are just doing it to learn, I'd suggest looking at the core http-in and -out nodes.

uibuilder is actually fairly simple in what it provides. The complexity comes largely from working around limitations in ExpressJS (e.g. how to remove end-points from the server) and making sure that everything is robust with few edge-cases to catch people out.

uibuilder does the following:

  • Serves up a static folder as an end-point
  • Creates a custom websocket channel for comms between Node-RED and the front-end
  • Serves up static folders for installed front-end libraries
  • Provides a simple editor for front-end code

If you just want the first of those, you can use Node-RED's static folder. The second can be manually created using the websocket nodes. The third could be worked around but would require a more complex setup. The final point can be avoided by being able to edit files on the server.

So everything can be done without uibuilder but nowhere near as easily.

uibuilder is aimed at getting people with minimal programming skills to a point of being able to serve up completely customised, user-focused web apps as quickly and easily as possible.

As well as uibuilder and http-in/-out, you also have Dashboard, Node-RED's own static folder and several other contributed nodes to let you build web interfaces. Do we need another?

3 Likes
#7

@TotallyInformation thanks for explaining what uibuilder in simple terms .. i was also stat looking at it and see how to use it to expedite front end dev..

1 Like