| name | web-ng-docker-loop |
| description | Run ServiceRadar `elixir/web-ng` locally against the Docker Compose CNPG database with copied mTLS certs and Docker secrets, then verify dashboard UI changes with Playwright. Use when iterating on web-ng, dashboard package, custom React dashboard, UAL WiFi map, SRQL topbar, or browser screenshot behavior without rebuilding the web-ng release image. |
Web-NG Docker Loop
Use this skill for fast local UI iteration when Docker Compose is already running the ServiceRadar mTLS stack. Prefer this loop over Bazel/release-image rebuilds until the final Docker parity check.
Quick Start
From the ServiceRadar repo root:
.agents/skills/web-ng-docker-loop/scripts/start-local-web-ng.sh
The script:
- copies
root.pem, db-client.pem, and db-client-key.pem from the Docker web-ng cert mount into tmp/web-ng-docker-loop/certs/
- reads the CNPG app password from the running Docker secret without printing it
- validates the local host connection to
localhost:5455
- syncs Docker filesystem plugin/dashboard package blobs into
tmp/web-ng-docker-loop/plugin-packages/
- starts
mix phx.server in elixir/web-ng on http://localhost:4000
If the app database password in Docker secrets does not match the local CNPG role, rerun once with:
.agents/skills/web-ng-docker-loop/scripts/start-local-web-ng.sh --repair-app-password
That repair path is only for the local Docker Compose stack; it uses the Docker superuser secret to reset the Docker serviceradar role to the Docker app secret.
Dashboard Package Import
After rebuilding a dashboard package, import it into the Docker-backed database without rebuilding web-ng:
.agents/skills/web-ng-docker-loop/scripts/import-dashboard-package.sh \
/home/mfreeman/src/ual-dashboard/dist/manifest.json \
/home/mfreeman/src/ual-dashboard/dist/renderer.js
This imports and enables the package through the running Docker web-ng release RPC, then prints the enabled content hash.
Restart the local loop, or rerun it with the default plugin-storage sync enabled, after importing a new dashboard renderer.
Browser Checks
Use $playwright-cli for interactive inspection and screenshots:
playwright-cli open http://localhost:4000/dashboards/ual-network-map
playwright-cli snapshot
playwright-cli screenshot --filename=tmp/ual-local.png
If authentication is required, obtain the admin password from docker compose logs config-updater without writing it into committed files.
Notes
- Keep generated certs and screenshots under
tmp/; do not commit them.
- Stop stale local Phoenix servers before starting a new one:
pkill -f 'mix phx.server'.
- Use the Docker route (
https://192.168.2.134/...) only for final parity after local checks pass.
- Run
npm run build:js && npm run build:css in elixir/web-ng/assets after JS/CSS changes before browser checks.
