What would be good strategies for developing frontend with Vue inside a flow?

General
1

Usually, I create simple frontend pages on Node-RED with the following structure:

Screenshot_20210623_031828
Screenshot_20210623_031828764Ă—284 16.4 KB

This works fine for simple projects, but I'd like to start using a framework like Vue for building pages. The problem here is that people usually use vue-cli for building the frontend and when I'm inside Node-RED it's not so straightforward to do something with vue-cli. I know I can start creating a project without it like the following flow:

[{"id":"60944f43.6d677","type":"http in","z":"55576db9.433f8c","name":"","url":"/vue/script","method":"get","upload":true,"swaggerDoc":"","x":720,"y":600,"wires":[["95c0ebb8.f0be6"]],"icon":"node-red/file-out.svg"},{"id":"d15b4988.2bdef8","type":"http response","z":"55576db9.433f8c","name":"","statusCode":"","headers":{},"x":995,"y":600,"wires":[],"l":false},{"id":"95c0ebb8.f0be6","type":"template","z":"55576db9.433f8c","name":"Vue.js","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"new Vue({\n  el: '#app',\n  data: {\n    message: 'Hello World from Vue.js!'\n  }\n})","output":"str","x":890,"y":600,"wires":[["d15b4988.2bdef8"]],"icon":"node-red/parser-html.svg"},{"id":"7db31366.e2febc","type":"http in","z":"55576db9.433f8c","name":"","url":"/vue","method":"get","upload":true,"swaggerDoc":"","x":700,"y":560,"wires":[["c020ba69.c6a72"]],"icon":"node-red/file-out.svg"},{"id":"917c3f8.6c47b4","type":"http response","z":"55576db9.433f8c","name":"","statusCode":"","headers":{},"x":995,"y":560,"wires":[],"l":false},{"id":"c020ba69.c6a72","type":"template","z":"55576db9.433f8c","name":"base HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"UTF-8\">\n\t\t<title></title>\n\t</head>\n\t<body>\n\t\t<script src=\"https://npmcdn.com/vue/dist/vue.js\"></script>\n\t\t<div id=\"app\">\n\t\t\t<p>{{ message }}</p>\n\t\t\t<input v-model=\"message\">\n\t\t</div>\n\t\t<script src=\"/vue/script\"></script>\n\t</body>\n</html>\n","output":"str","x":890,"y":560,"wires":[["917c3f8.6c47b4"]],"icon":"node-red/parser-html.svg"},{"id":"b8e1b1b2.2b1f4","type":"comment","z":"55576db9.433f8c","name":"Vue","info":"","x":790,"y":520,"wires":[]}]

And I also know that there's the uibuillder node that can be used for creating a Vue frontend project. But I'm confused about what are the options when I'm trying to do frontend development on Node-RED. What are the ways people usually do this kind of project on Node-RED? If I choose not to use the uibuilder the idea is to serve multiple script files like the ones on my JSON example? Or are there different techniques that I'm missing?

2

As per the built in documentation for the HTTP IN node...

The node will listen on the configured path for requests of a particular type. The path can be fully specified, such as /user , or include named parameters that accept any value, such as /user/:name . When named parameters are used, their actual value in a request can be accessed under msg.req.params .

See this flow as an example

3

In my case, I'd like to build it in a way that I don't rely on files on my computer... Just so I can easily export and import to different Node-RED instances on different servers. That's why I put the code inside the template. But I'm not sure if I end up overcomplicating the problem doing it.

I think that it's ok to have a git where I can push and pull some libraries that don't change on my code. But the mutable logic I think it'd be better if it was inside Node-RED... Because if I'm going to rely on having to manage project files on my computer, then I wouldn't need to use Node-RED at all, I could just build a frontend application with vue-cli and make it run on my server independently from Node-RED...

4

You can still use /files/:file format and use a switch node to direct the msg it to the desired template.

5

You could take a look at FlexDash (see FlexDash: towards a new dashboard for Node-Red), which uses vue.js. It uses Vite (not vue-cli) and that is really quite awesome. If you don't use bootstrap-vue or vuetify then you can use vue3, which works even better with Vite. The hot-reload and debugging helps are really awesome.

Just so I can easily export and import to different Node-RED instances on different servers.

Isn't that just a matter of bundling the files with the nodes so they get served up?

2 Likes
6

uibuilder already comes with Vue and bootstrap-vue (though you can use anything else you like). While it currently uses a folder within your Node-RED userDir, that should change with the next release. Even so, you can use a soft-link to move the actual content somewhere else.

To be honest though, to manage front-end code across multiple devices, you probably should be using GIT. Most likely GitHub or GitLab, etc.

7

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