Nuxt js App with embedded Node-Red

Hi there,

i have a question if it is possible to build a NUXT JS App and embed Node-Red in a layout.
My Goal is to have a permanent Sidebar for my App and one menu point is Node-Red.

The Sidebar just get smaller when node-red is the active layout and i still have access to the other menu Buttons of my app.

Here is an example with a normal navbar and where i want to embed Node-Red

how can i approach it? I still have read the documentation of embedding Node-Red but i don't know how to start when not using express.

Thx for helping and sorry for my bad english :wink:

Best Regards

Do you need to actually embed Node-RED into your own server? NuxtJS is an extension to VueJS and you can use that with the uibuilder node.

Or, if you don't want to use that, you can use the http-in/out nodes and a template node to load everything. You could even use the static folder capability that exists in Node-RED. Any of those will allow you to create a Vue/Nuxt front-end.


yes i need to embed Node-RED into my own Server. I don't want to create a Front-End like a Node-RED Dashboard. Its more an Admin UI for the Server itself where Node-RED is running on.

The Goal is to create an UI for the Raspberry PI to control the Services (Node-RED and eventually more) and to setup Node-RED config, Restart Node-RED or to setup the Network Card, Read the logs...all over a WebUI.

If i can't embed the Node-RED Editor in that way its also okay. Then i will go another way like if you want to edit the flows Node-RED will open in another Tab.

But Hope is still there :wink:

Perhaps, NUXT is also the wrong approach. I am open for suggestions.

Thx for helping

NUXT is only a tool to help manage front-end data flow so isn't really the issue here any more than Vue is.

OK, so a kind of alternative webmin then. I've actually looked at creating something like that myself in the past. Never got the time or really the detailed expertise to see it through unfortunately.

I actually don't think that you would need to embed Node-RED to achieve this though certainly you can if you need to. What matters more is what level of permissions Node-RED has when you run it. So you would need to run it with root permissions.

Once you've done that, then Node-RED can make any changes you need to files on the host device and can issue commands to control services and even to reboot. Restarting Node-RED itself only really needs to know the service name because you can then use the systemctl command via an exec node. If fact, if you are careful with group permissions and allow appropriate admin commands to be run with passwordless sudo, you could even continue to run Node-RED in its own user-id/group which is likely to be more secure, just harder to set up.

That is all back-end stuff though of course the Node-RED editor crosses the boundary - running in the front-end but changing the Node-RED back-end. Creating other UI pages that let the user control the server is just a matter of crafting something that, like the NR Editor, talks to the back-end which actually runs the commands. Really no different to any other "dashboard" or UI built with Node-RED.

My recommendation would be to start with a simple example. Create some buttons using Dashboard and get them to start flows that, for example, restart services on the host. That is your proof of concept.

To step that up, I think that you are likely to want to build something custom however, so the next step would be to switch to uibuilder with Vue (the default framework for uibuilder along with bootstrap-vue) and reproduce your buttons so that you get to understand the data flows.

Then you can think about integrating with NUXT which is certainly useful for more complex UI's as it enforces data flow discipline. However, in order to use NUXT, I think you will need to introduce a build step to your front-end code which you can certainly do with uibuilder, there is an example in the WIKI. Unfortunately, this is not yet fully integrated with the Editor config for uibuilder so you will need to have separate file-level access to the front-end code. However, you can achieve that via your normal development workflow.

Hope this makes sense? Thanks to Node-RED, this is very easy to start and do a proof of concept/prototype and I highly recommend that as an approach.

As far as I can see at the moment, the only reason for you to consider going the embedded route would be if you needed to Integrate Node-RED with an existing Node.JS server or if you needed lots of bespoke server code (though even that could most likely be done with a custom NR node or two which aren't hard to write).

Oh, one other thing. Personally, I would advise not installing Node-RED the "standard" way if you are doing this. I would recommend taking full control of the Node-RED installation in a similar way to my alternate installer.

That way you get maximum control over the Node-RED installation and if you did eventually decide that you really needed to embed Node-RED into your own bespoke nodejs/Express server, it would still be fairly easy to do since NR would already be installed in a "local" folder that could also host the bespoke server code.

1 Like

Thank you for the detailed explanation. I will try it.

Where can i find your alternate installer?

No problem. Please do let us know how you are getting on. I suspect that there would be many people interested in a Node-RED implementation of a webmin style system maintenance service.

The alternate installer is here:

Just to let you know that I've just updated the installer on GitHub. You may wish to try that version rather than the published one.

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