When building a complex dashboards in node-red having the ability to edit in VS Code speeds up development.
I have not found any integrations to do this, so as a workaround I wrote these scripts. They extract and return the function nodes, or the vue templates of dashboard2 elements.
Run functions-templates-watch, it extracts all the function and dashboard templates to the /src. It then watches for changes and writes them back to the flows.json. It also watches the flows.json in case you change something in the node-red editor and extracts everything again on deploy.
With all "normal" NR there is no problem with this naming, but with functions-templates-watch.js it throws an error like this:
$ node functions-templates-watch
Extracting from flows.json
Watching /home/user/.node-red/src and flows.json
node:fs:2367
return binding.writeFileUtf8(
^
Error: ENOENT: no such file or directory, open '/home/user/.node-red/src/base_explorer/filter open/ecu-d2009fae2476ec04.js'
at Object.writeFileSync (node:fs:2367:20)
Seems the functionality needs a specific naming convention.
Doesn't sound good because "filter open3e/ecu" is the naming of a normal function in a normal flow.
i see the problem, I was thinking of writing a manifest in-between to keep track of names and z ids (like Flo2Scr does), this was mostly for duplicate names, i have those a lot. I will write an update and pop it on github, as this has become an invaluable tool for me. I will post here when done, day job needs a bit of focus but should have something up in 24 hours
I have updated the code. version 1.0.1 is there, the names of the files look nicer, and it works with files that have / or \ in the name. As well as duplicates.
The file names in /src reflect those in node-red, duplicate names are given (n) additions. Any names containing slashes, both forward and backward slashes, are replaces with "-" in the file name.
There is also error handling in case you delete something in node-red and it is left on the /src. I often delete the /src folder before I start the watch.
Another point I should have mentioned ... not a problem, but a request for improvement.
Normally the flows are stored under ~/.node-red/flows.json. But it could be a different name depending on the OS installation (like for RPI: flows_raspberrypi.json) or for other reasons.
It would be good to optionally pass the name for the “flows” file.
Some more tests with VScodium and ssh access to the NR flows on an RPI.
The editor displays directories, each stands for a flow containing files which holds the code of one node. So far so good.
The main part (in my case) files belonging to Dashbaord vers.2 templates are missing.
I double checked not to look for templates belonging to DB vers.1.
In the NR Editor I see the type of those nodes in question, they are "ui-template"
**Open Remote - SSH** ***v0.0.49***
139K | [4.5](vscode-file://vscode-app/app/share/codium/resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)
Use any remote machine with a SSH server as your development environment.
For this watch/extract/collect funtions Dashboard vers.2 ui-template needs to have a first code line with <template>.
I used to have a comment block <!-- xx --> before the <template> to hold a few development points and a filename where I saved the code.
i'll do that, was also thinking of a --clean parameter, so it deletes the src directory when you startup watch. I'll post here when done. I will also think of a better way to identify the template so people can put there notes at the top
I have been desperately looking for to have a way to open multiple functions at the same time.
Your tool is providing this
I'm not using dashboard but a few functions as I am using npm libraries not integrated into a contrib node (eg. bullmq...).
I am also using projects. And I guess it might be the reason of the problem I am facing.
If I go in the projects directory and do the "export" node functions-templates-watch.js --clean --flows-file ./flows.json it works fine.
I can then edit the .js in Visual Code. When, I save in Visual Code, I get this:
Updated flow id 25e49db6c0162df5 with Subscriber/function 9.js
Detected change (change) in ..bla-bla-bla-.../flows.json.
Error: fetch failed
And then, if I go back to the Nodered interface, reusing the example above, code in function9 is not changed.
However, if I grep in flows.json, I can see the modification.
my bad on error messages, that happens when node-red is not running on http://localhost:8081
The root cause is the script does a POST to http://localhost:8081/flows to get it to reload from the flow file and it shows a merge message in the node-red UI.
i will add another argument to set the path to node-red instead of it being hard-coded to 8081 and improve the message
Thanks ! Tomorrow, I’ll try to change the .js to use the correct endpoint in my setup. I’ll check if statically like that it works.
And yes, being able to set this dynamically would be much better.
Update: Done. It works. Change the URL in functions-templates-collect.fs
I have removed the hard-coded link to the node-red server (basic schoolboy error), and added a new parameter to the script, so it works with my unusual configuration, where i have several node-red servers running at same time on different ports.
--clean This first removes the /src folder and does a clean extract from flows.json on startup. Don't forget to merge your changes back into node-red using the "review changes" in the node-red editor, as this will overwrite unsaved /src changes if the script re-starts.
--flows-file This allows you to run the scripts from anywhere, if you don't supply this value it defaults to ./flows.json
--server-url This allows the scripts to communicate with node-red running on different ports or different location, defaults to http://127.0.0.1:1880
Something is wrong with my installation.
With version 1.0.3 (and today's minor update) all functions and VUE files are resolved from flows.json to /src and can be edited with VScodium. The edited files are updated in /src, but the flows.json is not updated with the edit changes.
Is it a directory error or chokidar misconfigured?
What does “changes back into node-red using the ”review changes“ in the node-red editor” mean?
Does this mean “Deploy”? But this is not active!
I will do some more testing tonight to see if I can replicate your error. I was also planning to make a quick video, that shows among other things the review changes bit working, As sometimes you can miss that popup toast, and there is only a small warning triangle in the header bar of node red. I post here when I have checked everything, might not be a till tomorrow.
As it has grown beyond a small hack script for myself, I am thinking of refactoring and putting unit tests in place, but again that's going to take some time.
This looks promising! Certainly something I can make use of. If you are open to a suggestion: how about wrapping the function bodies into a callable structure: function(msg){ <<function body here>> }? This would make dev-time test development more manageable.
I don't understand your suggestion.
The tool provided by Daniel (thanks again!) aims at allowing the edition on your preferred tool (VSCode or else) with the possibility to have multiple windows in parallel.
It shouldn't change the code of the function.
Beachte den Unterschied: 
