From 25d1f321383faff089c7bde9c04402b6c7694632 Mon Sep 17 00:00:00 2001 From: Augustin Husson Date: Tue, 28 Feb 2023 12:54:30 +0100 Subject: [PATCH] inject react-app in binary Signed-off-by: Augustin Husson --- Makefile | 12 +++++ go.mod | 1 + go.sum | 2 + scripts/compress_assets.sh | 37 +++++++++++++++ ui/react-app/.gitignore | 4 ++ ui/react-app/embed.go.tmpl | 16 +++++++ ui/react-app/src/Router.tsx | 2 +- ui/react-app/src/components/navbar.tsx | 4 +- ui/react-app/ui.go | 23 ++++++++++ ui/react-app/webpack.prod.ts | 5 +++ ui/web.go | 62 +++++++++++++++++++++----- 11 files changed, 153 insertions(+), 15 deletions(-) create mode 100755 scripts/compress_assets.sh create mode 100644 ui/react-app/embed.go.tmpl create mode 100644 ui/react-app/ui.go 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 {