Business application with vue.js/uibuilder and Node-Red as backend

Dashboard
1

This is a question to @TotallyInformation to check that my understanding of uibuilder / vue.js is correct, but of course feel free to leave your advice.

I was thinking if I could build a business application with uibuilder and Node-Red as the back-end. When I say business application I mean an webapp where there are different business objects, like accounts, products, orders, etc. and the user can view, search, create them on a web UI.

I did a simple experiment with how I think it would work with uibuilder and Node-Red. This is my first time doing anything in uibuilder or vue.js. So I mainly wanted to check my basic understanding.

I created a single uibuilder node, and in the HTML code I have a lot of sections like this:

<b-card v-if="screen === 'accountlist'" class="mb-2">

screen is a props which gets populated by the message I send from Node-Red. If the user clicks on the Accounts button to see all customers, I set the screen to accountlist and the it will activate this card in html and populate the content based on the customer list. When the user clicks on any of the customer in the list, that sends a "navigation request" to Node-Red, which prepares another message, screen value changes to 'account' and a different card is shown on the page.

So in a single HTML, I code all the various screens my app can have (with header, navigation, etc staying the same all the time) and the centre "content" portion of the screen updates all the time.

I wanted to ask if this good concept for such a framework? Would it be better to do it in a different way? Something which is more structured?

I made a quick video, to show the concept.

Cheers,
Csongor

2

Hi there, there isn't really a right and wrong answer to this. The best answer is "whatever works for your requirements".

The danger with putting everything into a single page is, of course, that the page becomes so complex that it is very hard to maintain.

So if you do go down this route, I would advise you to look at vue-router and Vue components. You might also want to look at vuex as well. Bear in mind that I am far from being a Vue expert though :grinning: Most of my Vue code is deliberately kept fairly simple.

Remember that uibuilder is a convenience tool. Designed to give you an easy link between your front end and Node-RED as a data manager back-end. It manages the comms, makes it easy to send and receive data and also does the heavy lifting of making pages, libraries and other resources available from Node-RED to the front-end. The Vue stuff really is up to you I'm afraid.

The alternative approach would be to split the app into multiple uibuilder nodes or just multiple pages under 1 node. All 3 approaches are supported by uibuilder. A split app might make sense if the various parts are quite distinct. Maybe they are used by different people, take different data, etc.

1 Like
3

Thanks for your insight.
Question about splitting: How that is done? I mean I understand that I can have multiple nodes. How do you do multiple pages under 1 node?

What I am not sure about if I am using multiple pages, how I can keep a global framework of my pages? Meaning a header, navigation bar, maybe a footer section, message handling to be the same on all pages.

When I was watching a vue crash course video, I remember how the example app was broken up into components that we than references in the main app. Components existed in separate vue files. And you also mentioned looking at components just above. I just don't see how I go about doing the same in uibuilder. I can see that I can create new files in the node. That is how? And I assume in that case I also need to emit my messages up to the main app to send a message back to Node-Red?

Sorry about all these questions, I did not see a Wiki article which was specific to these scenarios.

4

Any page in the same root folder for a uibuilder node can use the same socket.io namespace. Try creating an index1.html and index1.js for example. Whereas the index.html page is loaded as the default for the url, index1.html will have to be loaded manually.

For example, if your uib node has a url of test running on localhost:1880, you can access the index.html page using http://localhost:1880/test. But to access the index1.html, you would need to do http://localhost:1880/test/index1.html. You could, of course, access the default page as http://localhost:1880/test/index.html if you really wanted to. Once you have your head around that, try renaming index1.html as page2.html and access as http://localhost:1880/test/page2.html.

The js file can in fact be named anything as can the css file. I only use index.js and index.css to show that they are related, feel free to call them anything you like. Just amend the link in the html accordingly.

Now, that all works easily if you keep everything in 1 folder. ~/.node-red/uibuilder/test/src/ in the example above assuming you haven't changed any of the defaults. As your app gets more complex, you might want to put some files in a sub-folder such as ~/.node-red/uibuilder/test/src/sub/. At this point, a javascript file in that sub-folder can no longer work out what the socket.io namespace should be. So now you would need to amend the uibuilder.start function call to pass in the correct namespace. The namespace is usually fairly easy to figure out but if you get stuck, you can find it in the uibuilder details or instance details pages available from the Editor. Or you can turn on the uibuilder.debug and you will see that it prints the details to your browser's dev console (for the default page).

As you have probably realised, Vue components are the answer to that.

When you start to use Vue components in files, you either have to compile them on the fly using something like the http loader extension (see the WIKI for details) or you have to do a build step to compile your components into a single file, again, details in the WIKI.

I am working towards a version of uibuilder that will make it much easier to work with a build step by being able to run the build (possibly even dynamically when a file changes) from within Node-RED. Not quite there yet, I need to get v4 out the door first. Until then, the instructions in the WIKI tell you how to do it for yourself.

Yes, as mentioned, if you end up with js files in a sub-folder, you will probably have to use uibuilder.start with the optional parameters that tell the front-end what socket.io namespace to use. Once you do that, the comms will "just work" magically :grinning:

No problem.

PS: the use of an index.html file to act as the default for a specific "folder" of a url - http://localhost:1880/test/ in the example above - is a common shortcut used by a lot of web servers including the ExpressJS server that Node-RED uses (and so uibuilder also uses).

For Node-RED, node.js is the underlying platform and ExpressJS is the web server module.

hardware->OS->node.js->Node-RED->ExpressJS->uibuilder

Node.js is the executable that actually runs.

5

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