How to build your UI online while you are coding

Development
,
1

While you are coding to create the UI, you can face and hit thousand of errors, and build a module for testing your UI code is so boring

At first you need to install the module you want to build the UI on a server (think to install also rsync)

For a rootless module, you will need to open two terminal in your vscode project

  • in the first terminal
cd ui
# this might be not needed, because I set it permanently in my system
export NODE_OPTIONS=--openssl-legacy-provider
# this command will build the UI 
yarn install && yarn watch
  • in a second terminal (rsync must be installed on the VM where the module is installed)
cd ui
# each time a change will be updated it will be rsync to your server, empty the cache & refresh the page
watch  -n 1 rsync -avz --delete dist/* root@rocky9-pve3.org:/var/lib/nethserver/cluster/ui/apps/lamp2

for a rootfull container you need to adapt the path to the roofull container, the first command in terminal still are not changed, only on the second terminal
watch -n 1 rsync -avz --delete dist/* root@rocky9-pve3.org:/var/lib/nethserver/cluster/ui/apps/nethsecurity-controller1

then go to the cluster-admin page you are modifying, open a developer terminal (F12) inside your page and refresh the page with a right click (empty the cache and refresh the page)

https://github.com/user-attachments/assets/086a3979-533c-4927-95f6-a7c93db4dfb1

5 Likes