mudler
diff --git a/‎.dockerignore‎
Lines changed: 3 additions & 0 deletions b/‎.dockerignore‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎.github/workflows/build.yml‎
Lines changed: 4 additions & 0 deletions b/‎.github/workflows/build.yml‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎.github/workflows/release.yml‎
Lines changed: 4 additions & 0 deletions b/‎.github/workflows/release.yml‎
Lines changed: 4 additions & 0 deletions
diff --git a/‎.github/workflows/test.yml‎
Lines changed: 15 additions & 4 deletions b/‎.github/workflows/test.yml‎
Lines changed: 15 additions & 4 deletions
diff --git a/‎.gitignore‎
Lines changed: 3 additions & 1 deletion b/‎.gitignore‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎.goreleaser.yml‎
Lines changed: 3 additions & 0 deletions b/‎.goreleaser.yml‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎Dockerfile‎
Lines changed: 13 additions & 0 deletions b/‎Dockerfile‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎Makefile‎
Lines changed: 29 additions & 0 deletions b/‎Makefile‎
Lines changed: 29 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 20 additions & 0 deletions b/‎README.md‎
Lines changed: 20 additions & 0 deletions
diff --git a/‎api/api.go‎
Lines changed: 19 additions & 19 deletions b/‎api/api.go‎
Lines changed: 19 additions & 19 deletions
@@ -0,0 +1,3 @@
+api/react-ui/node_modules
+api/react-ui/dist
+.git
@@ -15,6 +15,10 @@ jobs:
         uses: actions/setup-go@v6
         with:
           go-version: 1.26
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
       - name: Run GoReleaser
         uses: goreleaser/goreleaser-action@v7
         with:
 
@@ -17,6 +17,10 @@ jobs:
         uses: actions/setup-go@v6
         with:
           go-version: 1.26
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
       - name: Run GoReleaser
         uses: goreleaser/goreleaser-action@v7
         with:
 
@@ -16,11 +16,16 @@ jobs:
         uses: actions/setup-go@v6
         with:
           go-version: 1.26
-      
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Build React UI
+        run: make react-ui-force
+
       - name: Build
-        run:
-            go build
-      
+        run: go build
+
       - name: Generate edgevpnconfig
         run: |
               ./edgevpn -g > config.yaml
@@ -51,6 +56,12 @@ jobs:
         uses: actions/setup-go@v6
         with:
           go-version: 1.26
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Build React UI
+        run: make react-ui-force
       - name: Download result for build
         uses: actions/download-artifact@v8
         with:
 
@@ -8,4 +8,6 @@
 /docs/node_modules/
 /docs/.hugo_build.lock
 /docs/package-lock.json
-/docs/package.json
+/docs/package.json
+/api/react-ui/dist
+/api/react-ui/node_modules
@@ -1,5 +1,8 @@
 # Make sure to check the documentation at http://goreleaser.com
 version: 2
+before:
+  hooks:
+    - make react-ui-force
 builds:
   - ldflags:
       - -w -s
 
@@ -1,6 +1,16 @@
 # Define argument for linker flags
 ARG LDFLAGS=-s -w
 
+# Build the React UI in a Node stage so the Go builder can embed it.
+# Pinned to $BUILDPLATFORM: the bundle is arch-independent, so building it
+# once natively beats rebuilding it under QEMU for every target platform.
+FROM --platform=$BUILDPLATFORM node:22-alpine AS react-ui-builder
+WORKDIR /ui
+COPY api/react-ui/package.json api/react-ui/package-lock.json ./
+RUN npm ci
+COPY api/react-ui/ ./
+RUN npm run build
+
 # Use a temporary build image based on Golang 1.20-alpine
 FROM golang:1.26-alpine as builder
 
@@ -13,6 +23,9 @@ ADD . /work
 # Set the current work directory inside the container
 WORKDIR /work
 
+# Bring in the built UI so //go:embed finds it
+COPY --from=react-ui-builder /ui/dist /work/api/react-ui/dist
+
 # Install git and build the edgevpn binary with the provided linker flags
 # --no-cache flag ensures the package cache isn't stored in the layer, reducing image size
 RUN apk add --no-cache git && \
 
@@ -0,0 +1,29 @@
+.PHONY: all build react-ui react-ui-force test clean
+
+all: build
+
+# Skip the npm build when dist already exists, so repeated `make build`
+# is fast. This intentionally reuses a stale dist — use react-ui-force
+# in CI and releases where correctness matters more than speed.
+react-ui:
+ifneq ($(wildcard api/react-ui/dist),)
+	@echo "api/react-ui/dist already exists, skipping build"
+else
+	cd api/react-ui && npm ci && npm run build
+endif
+
+# Always rebuild from source. Used by CI, goreleaser and Docker.
+react-ui-force:
+	rm -rf api/react-ui/dist
+	cd api/react-ui && npm ci && npm run build
+
+api/react-ui/dist: react-ui
+
+build: api/react-ui/dist
+	go build -o edgevpn
+
+test: api/react-ui/dist
+	go test ./...
+
+clean:
+	rm -rf api/react-ui/dist edgevpn
@@ -75,6 +75,26 @@ Check out [Kairos](https://github.com/kairos-io/kairos) for seeing EdgeVPN in ac
 
 Download the precompiled static release in the [releases page](https://github.com/mudler/edgevpn/releases). You can either install it in your system or just run it.
 
+# :hammer: Building from source
+
+The web UI is a React application compiled into the binary, so a Node
+toolchain (**Node 20.19+**) is required for a full build:
+
+```bash
+make build            # builds the UI if needed, then the Go binary
+make react-ui-force   # force a clean UI rebuild
+```
+
+`go build` alone works only when `api/react-ui/dist` already exists —
+the UI is embedded with `//go:embed`, and a missing directory is a
+compile error. For Go-only work you can stub it:
+
+```bash
+mkdir -p api/react-ui/dist && touch api/react-ui/dist/index.html
+```
+
+See [`api/react-ui/README.md`](api/react-ui/README.md) for frontend development.
+
 # :computer: Usage
 
 EdgeVPN works by generating tokens (or a configuration file) that can be shared between different machines, hosts or peers to access to a decentralized secured network between them.
 
@@ -17,10 +17,8 @@ package api
 
 import (
 	"context"
-	"embed"
 	"errors"
 	"fmt"
-	"io/fs"
 	"net"
 	"net/http"
 	_ "net/http/pprof"
@@ -46,18 +44,6 @@ import (
 	"github.com/mudler/edgevpn/pkg/types"
 )
 
-//go:embed public
-var embededFiles embed.FS
-
-func getFileSystem() http.FileSystem {
-	fsys, err := fs.Sub(embededFiles, "public")
-	if err != nil {
-		panic(err)
-	}
-
-	return http.FS(fsys)
-}
-
 const (
 	MachineURL    = "/api/machines"
 	UsersURL      = "/api/users"
@@ -235,8 +221,8 @@ func API(ctx context.Context, l string, defaultInterval, timeout time.Duration,
 	ec := echo.New()
 
 	var (
-		unixSocketPath  string
-		ownsSocketFile  bool // true iff WE created the file; false for systemd-passed FDs
+		unixSocketPath string
+		ownsSocketFile bool // true iff WE created the file; false for systemd-passed FDs
 	)
 	if strings.HasPrefix(l, UnixSocketScheme) {
 		unixSocketPath = strings.TrimPrefix(l, UnixSocketScheme)
@@ -262,7 +248,6 @@ func API(ctx context.Context, l string, defaultInterval, timeout time.Duration,
 		ec.Listener = unixListener
 	}
 
-	assetHandler := http.FileServer(getFileSystem())
 	if debugMode {
 		ec.GET("/debug/pprof/*", echo.WrapHandler(http.DefaultServeMux))
 	}
@@ -275,7 +260,19 @@ func API(ctx context.Context, l string, defaultInterval, timeout time.Duration,
 			return c.JSON(http.StatusOK, bwc.GetBandwidthByProtocol())
 		})
 		ec.GET(filepath.Join(MetricsURL, "peer"), func(c echo.Context) error {
-			return c.JSON(http.StatusOK, bwc.GetBandwidthByPeer())
+			// The counter keys by peer.ID, which is a *string* type holding raw
+			// multihash bytes. encoding/json resolves a map key by its String
+			// kind before consulting its TextMarshaler, so marshalling that map
+			// directly never calls peer.ID.String() and emits the raw bytes —
+			// mangled to U+FFFD on the way out, since they are not valid UTF-8.
+			// The result cannot be matched against the peer IDs every other
+			// endpoint reports, so key by the base58 form explicitly.
+			byPeer := bwc.GetBandwidthByPeer()
+			out := make(map[string]metrics.Stats, len(byPeer))
+			for p, stats := range byPeer {
+				out[p.String()] = stats
+			}
+			return c.JSON(http.StatusOK, out)
 		})
 		ec.GET(filepath.Join(MetricsURL, "peer", ":peer"), func(c echo.Context) error {
 			return c.JSON(http.StatusOK, bwc.GetBandwidthForPeer(peer.ID(c.Param("peer"))))
@@ -430,7 +427,10 @@ func API(ctx context.Context, l string, defaultInterval, timeout time.Duration,
 		return c.JSON(http.StatusOK, list)
 	})
 
-	ec.GET("/*", echo.WrapHandler(http.StripPrefix("/", assetHandler)))
+	if err := registerUI(ec); err != nil {
+		// A binary built without the React UI must still serve the API.
+		ec.Logger.Errorf("web UI not available: %v", err)
+	}
 
 	ec.GET(BlockchainURL, func(c echo.Context) error {
 		return c.JSON(http.StatusOK, ledger.LastBlock())
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+api/react-ui/node_modules`
	`2`	`+api/react-ui/dist`
	`3`	`+.git`