Using VSCodium and a Local Repository and/or Codeberg. I want to create an integrated Workflow for UIBUILDER... (on Linux)

[mudwalker]

After reading @vonbaron thread and being reminded by @TotallyInformation that VSCode is a good thing, I have looked at VSCodium (VSCode without Microsoft Telemetry) and installing the extensions ESLint, HTMLHint, StyleInt along with Forgejo. I also have Git Lens loaded. The first thing was that I found I had a few mistakes in my HTML, things I would not have caught, even after a few hours of fault-finding (the usual scenario or SNAFU!).

I opened the local UIBUILDER Directory under .node-red (Node-RED is already set up for a local GIT install) and proceeded to make valid amendments based on the ‘Linting’ (never had anything like this in my day!). I ‘COMMIT’ed the changes to GIT and expected UIBUILDER to accept the new code. But alas, that was not to be!

Does anyone have any suggestions as to how I need to COMMIT these changes to get them picked up by UIBUILDER?

BTW, the Button at the top of UIBUILDER only appears to load the VSCode SVG file of the icon. But then I would expect this as I am using VSCodium, there are probably differences…

[TotallyInformation]

@mudwalker

‘Linting’ (never had anything like this in my day!)

Ah, we had to submit out source code to a batch job and wait for a print-out of all of the possible errors! Interestingly, that was also how we wrote reports and documentation - using SGML (HTML-like XML markup long before XML and HTML were "things"), submitting to a batch job to get the printout which had the spelling and other errors listed at the end. Ah, the old-days were the "best" weren't they!

@mudwalker

BTW, the Button at the top of UIBUILDER only appears to load the VSCode SVG file of the icon. But then I would expect this as I am using VSCodium, there are probably differences…

You will probably have to adjust the link that uibuilder auto-creates. Open the uibuilder node, go to the Advanced tab, you will find it there.

@mudwalker

I ‘COMMIT’ed the changes to GIT and expected UIBUILDER to accept the new code. But alas, that was not to be!

Does anyone have any suggestions as to how I need to COMMIT these changes to get them picked up by UIBUILDER?

Even without GIT committing the changes, you should only need to reload the page to see them. When I'm doing a lot of edits for a uibuilder site, I sometimes create a small flow that starts with a watch node and ends with a command sent to the uibuilder node to reload the page automatically.

The whole point of the way uibuilder works is that it is simply using static file resources so there is nothing you need to do in Node-RED or anywhere other than reloading the page to see the changes.

[mudwalker]

Hmmm, I do the changes and nothing appears to happen to the files in the src/fe-routes directory despite me accessing the files in VSCodium, or File Explorer from there. If I don’t COMMIT AND SYNC, the files stays marked with ‘M’ (Modified), once the COMMIT AND SYNC happens, the ‘M’ clears, I assume that this means the COMMIT has been made and supposedly ‘all is well with the world’. but the files as downloaded with File Explorer still show the old version.

My diagnosis of this is that the COMMIT goes somewhere else and there is a Disjoint between VSCodium and the physical UIBUILDER files in NR. Could it be the …

@TotallyInformation

I sometimes create a small flow that starts with a watch node and ends with a command sent to the uibuilder node to reload the page automatically.

is the ‘disjoint?

I have refreshed NR, done a node-red-stop, node-red-start, nothing appears to make any difference!

[mudwalker]

(However, this Workflow has now become a priority, especially as it might just save me a little time! I MIGHT even get to like VSCod(ium) a bit!!)

[TotallyInformation]

@mudwalker

If I don’t COMMIT AND SYNC, the files stays marked with ‘M’ (Modified), once the COMMIT AND SYNC happens, the ‘M’ clears, I assume that this means the COMMIT has been made and supposedly ‘all is well with the world’

What GIT does and what is in the actual filing system are two separate things. GIT is a kind of database for storing file/folder changes. The files/folders themselves always contain what you just saved. When you run a GIT commit, all it does is take the changes since the previous saved version of the file and pushes them, along with the commit message into its database. Git only ever effects its own database unless you chose to restore from an older commit. Committing regularly lets you have finer-grained control over restores but gives no other benefit.

[TotallyInformation]

Just installing VSCodium to see if something odd is happening.

[mudwalker]

HOLD IT! I think I may have found where the disjoint is!

VDCodium, modify file
File Explorer, Open file and we get this…

The modification is the </main> tag (from </more>)

I have a file loaded from a Template that still contains the unmodified file. As soon as I Deploy the Template gets reloaded, overwriting my amendment.

The ‘disjoint’ appears to be me, or PEBCAK. I need to COMMIT (see what I did there) to using VSCodium and forget about my Templates.

Am I correct in this??

[TotallyInformation]

@mudwalker

Am I correct in this??

Urm, I think so.

@mudwalker

The modification is the </main> tag (from </more>)

Not quite sure what you mean by that but you seem to have sorted it. So not a problem with either uibuilder or vscodium.

Anyway, I've installed VSCodium which is useful anyway because I needed a clean install of VSCode to test out some issues I've been having with slow responses from it.

[mudwalker]

If this is the case, I will end up with UIBUILDER flow like Paul’s @vonbaron

[mudwalker]

@TotallyInformation

Not quite sure what you mean by that but you seem to have sorted it. So not a problem with either uibuilder or vscodium.

The </main> is the modification I made from the </more> in the Template file.

No, definitely not a problem with UIBUILDER or VSCodium. Just my poor understanding - as usual!! Give me Hardware to fault-find anytime!

[TotallyInformation]

@mudwalker

The </main> is the modification I made from the </more> in the Template file.

Ah, I see. <main> is a standard HTML tag and formatted for a sensible width in the uibuilder default css.

more is an HTML ID attached to a <div> tag in all of the default uibuilder templates so that the example flows all work seamlessly.

[mudwalker]

Just a quick follow up…

VSCodium with Linting is the Bees Knees now I have it sorted in my head, even remote systems!!

[TotallyInformation]

@mudwalker

VSCodium with Linting is the Bees Knees now I have it sorted in my head, even remote systems!!

Yes it is!

You might note that I've included an eslint config in every uibuilder instance root. So when using VSCode to edit, simply open the built-in terminal and run npm install which will give you a whole bunch of config and extensions in dev-dependencies.

[mudwalker]

Thank you for that! Sometimes I just need to be hit around the head with a bat, or a similar hard implement, to get stuff forced into the grey matter.

I now need to go back to my original ‘Template’ and see how I have changed things to make my current Template ‘not quite right’ . I think in getting things working, I may have added some corruptions on the premise of ‘Ah, it works with this!’ My own fault…

BUT, with VSCode and stuff, it is far easier to make the changes now.

[vonbaron]

This is good news indeed

@TotallyInformation

Ah, the old-days were the "best" weren't they!

Well, maybe, but I'm sure given a choice you would rather be here and now and not then. But do often find myself reminiscing to good ol' days, where linting meant something very different.

@mudwalker

I MIGHT even get to like VSCod(ium) a bit!!)

Ooooh, good to hear, even if the pain of a burst synapses is part of the journey. Ones that burst are ones I don't need.

A little on how I use VSCode. I have it installed just on my main GNU/Linux machine and use the remote SSH in VSC to connect to other machines, and in this case, the little industrial RPi that runs headless Debian and has Node Red installed.

The file layout I use for the UIBUILDER projects looks as follows:

Essentially I use my own style layout in terms of directories.
All js files under js and then the project files that are front end injected with their corresponding js file under the project directory, and so forth.

Editing is simple, as Julian says, just edit and then save and then on your other virtual workspace where you run your browser, simply reload and the updates are done.

I usually have browser dev tools open to see messages and other data I am interested in, plus the cache will be disabled to force the reloading of each file from the server.

There is no GIT commit or anything that I do, simply edit and save.
I didn't even have ESLint installed until I see you mention it. I hear about it, but never use it, so will be interesting to see what it suggests to me.

@mudwalker

If this is the case, I will end up with UIBUILDER flow like Paul’s @vonbaron

There is hope, great hope I see. Using this method of editing you need nothing in Node Red itself.
Plus, it is easy to make backups of all your files, say by connecting your Linux file manager to your Node Red machine and simply copy files. You do do backups right ?

@mudwalker

VSCodium with Linting is the Bees Knees now I have it sorted in my head, even remote systems!!

This is a story with a happy ending, let the progress begin

[TotallyInformation]

@vonbaron

The file layout I use for the UIBUILDER projects looks as follows:

With that number of additional resources, you might want to consider adding a build step, if only to consolidate the js libraries. Create something like a libs.mjs file (an ES Module) and add import statements for your libraries and an export object for them all. Then use something like ESBUILD and configure it to either output an ES Module or an IIFE output depending on what style of front-end programming you prefer. It will then consolidate all the libraries to a single file which you can load in your HTML.

@vonbaron

use the remote SSH in VSC to connect to other machines

I used to do that and I do have it configured. However, I got fed up of being tripped up not being able to edit root files. So I ended up creating an SSH virtual filing system on my Windows dev machine which I connect when I want to edit on my live server. Means I can edit files in /etc or elsewhere should I need to and also means that I can use familiar Windows file management.

@vonbaron

Plus, it is easy to make backups of all your files, say by connecting your Linux file manager to your Node Red machine and simply copy files. You do do backups right ?

Hopefully everyone is doing backups. BUT, I know a lot of people are doing backups via Node-RED. Personally, that feels like an "all-eggs-in-one-basket" thing to me. I have a CRON schedule that runs the local backup 7-nightlies/4-weeklies/12-monthlies. My NAS takes care of the 2nd level (stored on the NAS) and 3rd level (stored in the cloud) backups - everyone IS practicing 3-2-1 backup strategies, right?

[TotallyInformation]

By the way, to adjust uibuilder's auto-link to open an instance root, just change the vscode: to vscodium:

[krambriw]

@TotallyInformation

everyone IS practicing 3-2-1 backup strategies, right?

Well, I would not get the highest score...but I do at least something...

On all my RPi's (Rpi3-5, in total 7 distributed in my home automation system responsible for various tasks) I have a basic flow:

• night backups of complete .node-red folder and subfolders to a cloud storage
• monthly backup doing a local incremental SD card clone (each RPi is having an extra usb card reader w SD card of same size as the one that is operational)

So for each RPi I always have the last 7 days and once a month a fully updated SD card. The incremental backup is so fast when you have made it once so I could also run it on a weekly basis or on special demand if needed. If you are interested in incremental backup of the SD card, checkout rpiclone https://rpi-clone.jeffgeerling.com/

[mudwalker]

Had to rescue too many files for people who haven’t had backups. I do take them, but must admit, Windows has easier options for doing this. I personally used to use Birdiesync for all but System Backups as it was so easy to configure.

I use Free File Sync (FFS) on my Laptop and grab all files associated with NR, Grafana and InfluxDB from the remote server. If the NT Server fails I tend to rebuild from scratch and ‘just’ add the Configs and Data, that way I get (hopefully) a clean system.

Walter @krambriw that script does look good and maybe I should make a clone. It would be quicker to implement on a failed system, but I am always ‘worried’ about passing possibly corrupt system files across.

From Paul’s @vonbaron image and the way he has organised things,I have some amendments I would like to implement on the file system and I know that I can make the changes needed to keep UIBUILDER functional and not just blunder around!

I appreciate all the tips given, just need to implement them!

I keep saying it, and will continue saying it, input and advice like THIS is why this Forum is so successful, all down to willing Volunteers!!

[TotallyInformation]

@mudwalker

Free File Sync (FFS)

I don't do much backup from my desktop since all important data is either sync'd to the cloud or pushed to GitHub. I do have some backup to the NAS via its remote backup tool (and everything on the NAS is always backed up to the cloud). I do, however, use FFS with my photos. I work on photos on my desktop otherwise things get too slow. I run FFS manually when I've done some changes so that they are copied back to the NAS.

I do also have a license for an older version of SyncBack Pro and I used that a lot before I had a NAS. It is fantastic and very versatile. But not so cheap these days.