diff --git a/Makefile b/Makefile
index 5c155340..e1184a65 100644
--- a/Makefile
+++ b/Makefile
@@ -26,6 +26,18 @@ STATICCHECK_IGNORE =
# Will build both the front-end as well as the back-end
build-all: assets apiv2 build
+.PHONY: build
+build: build-react-app assets-compress common-build
+
+.PHONY: build-react-app
+build-react-app:
+ cd ui/react-app && npm install && npm run build
+
+.PHONY: assets-compress
+assets-compress:
+ @echo '>> compressing assets'
+ scripts/compress_assets.sh
+
.PHONY: assets
assets: asset/assets_vfsdata.go
diff --git a/go.mod b/go.mod
index 975107f9..c7170b0a 100644
--- a/go.mod
+++ b/go.mod
@@ -30,6 +30,7 @@ require (
github.com/pkg/errors v0.9.1
github.com/prometheus/client_golang v1.14.0
github.com/prometheus/common v0.39.0
+ github.com/prometheus/common/assets v0.2.0
github.com/prometheus/common/sigv4 v0.1.0
github.com/prometheus/exporter-toolkit v0.8.2
github.com/rs/cors v1.8.3
diff --git a/go.sum b/go.sum
index 6c0cecc7..715a83f5 100644
--- a/go.sum
+++ b/go.sum
@@ -487,6 +487,8 @@ github.com/prometheus/common v0.26.0/go.mod h1:M7rCNAaPfAosfx8veZJCuw84e35h3Cfd9
github.com/prometheus/common v0.29.0/go.mod h1:vu+V0TpY+O6vW9J44gczi3Ap/oXXR10b+M/gUGO4Hls=
github.com/prometheus/common v0.39.0 h1:oOyhkDq05hPZKItWVBkJ6g6AtGxi+fy7F4JvUV8uhsI=
github.com/prometheus/common v0.39.0/go.mod h1:6XBZ7lYdLCbkAVhwRsWTZn+IN5AB9F/NXd5w0BbEX0Y=
+github.com/prometheus/common/assets v0.2.0 h1:0P5OrzoHrYBOSM1OigWL3mY8ZvV2N4zIE/5AahrSrfM=
+github.com/prometheus/common/assets v0.2.0/go.mod h1:D17UVUE12bHbim7HzwUvtqm6gwBEaDQ0F+hIGbFbccI=
github.com/prometheus/common/sigv4 v0.1.0 h1:qoVebwtwwEhS85Czm2dSROY5fTo2PAPEVdDeppTwGX4=
github.com/prometheus/common/sigv4 v0.1.0/go.mod h1:2Jkxxk9yYvCkE5G1sQT7GuEXm57JrvHu9k5YwTjsNtI=
github.com/prometheus/exporter-toolkit v0.8.2 h1:sbJAfBXQFkG6sUkbwBun8MNdzW9+wd5YfPYofbmj0YM=
diff --git a/scripts/compress_assets.sh b/scripts/compress_assets.sh
new file mode 100755
index 00000000..8f384c79
--- /dev/null
+++ b/scripts/compress_assets.sh
@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+#
+# compress static assets
+
+set -euo pipefail
+
+cd ui/react-app
+cp embed.go.tmpl embed.go
+
+GZIP_OPTS="-fk"
+# gzip option '-k' may not always exist in the latest gzip available on different distros.
+if ! gzip -k -h &>/dev/null; then GZIP_OPTS="-f"; fi
+
+dist="dist"
+
+if ! [[ -d "${dist}" ]]; then
+ mkdir -p ${dist}
+ echo "
+
+
+
+ Node
+
+
+
+
+
+
+
This is the default index, looks like you forget to generate the react app before generating the golang endpoint.
+
+
+ " > ${dist}/index.html
+fi
+
+find dist -type f -name '*.gz' -delete
+find dist -type f -exec gzip $GZIP_OPTS '{}' \; -print0 | xargs -0 -I % echo %.gz | xargs echo //go:embed >> embed.go
+echo var embedFS embed.FS >> embed.go
diff --git a/ui/react-app/.gitignore b/ui/react-app/.gitignore
index c2658d7d..28800db6 100644
--- a/ui/react-app/.gitignore
+++ b/ui/react-app/.gitignore
@@ -1 +1,5 @@
node_modules/
+
+dist/
+
+embed.go
diff --git a/ui/react-app/embed.go.tmpl b/ui/react-app/embed.go.tmpl
new file mode 100644
index 00000000..1d6d7894
--- /dev/null
+++ b/ui/react-app/embed.go.tmpl
@@ -0,0 +1,16 @@
+// Copyright 2023 The Prometheus Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package reactApp
+
+import "embed"
diff --git a/ui/react-app/src/Router.tsx b/ui/react-app/src/Router.tsx
index ea0c5fe6..94d32a23 100644
--- a/ui/react-app/src/Router.tsx
+++ b/ui/react-app/src/Router.tsx
@@ -8,7 +8,7 @@ function Router() {
return (
- } />
+ } />
);
diff --git a/ui/react-app/src/components/navbar.tsx b/ui/react-app/src/components/navbar.tsx
index ed5e5bb4..d7bf387d 100644
--- a/ui/react-app/src/components/navbar.tsx
+++ b/ui/react-app/src/components/navbar.tsx
@@ -13,7 +13,7 @@ export default function Navbar(): JSX.Element {