clean web framework

Author: mjudeikis

.github/workflows/image.yaml

@@ -19,25 +19,46 @@ jobs:
       with:
         go-version: v1.24.0
         check-latest: true
+    
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: web/package-lock.json
+    
     # We need this to remove local tags that are not semver so goreleaser doesn't get confused.
     - name: Delete non-semver tags
       run: 'git tag -d $(git tag -l | grep -v "^v")'
+    
+    # Set up Docker Buildx for multi-platform builds
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+    
     # If you notice signing errors, you may need to update the cosign version.
     - uses: sigstore/cosign-installer@v3.7.0
+    
     - name: Install ko
       run: go install github.com/google/ko@latest
 
     - name: Set LDFLAGS
       run: echo LDFLAGS="$(make ldflags)" | tee -a >> $GITHUB_ENV
 
+    # Login to GitHub Container Registry (used by both ko and Docker)
+    - name: Login to GitHub Container Registry  
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
     # Build ko from HEAD, build and push an image tagged with the commit SHA,
     # then keylessly sign it with cosign.
     - name: Publish and sign konnector image
       env:
         KO_DOCKER_REPO: ghcr.io/${{ github.repository_owner }}/konnector
         COSIGN_EXPERIMENTAL: 'true'
       run: |
-        echo "${{ github.token }}" | ko login ghcr.io --username "${{ github.actor }}" --password-stdin
         img=$(ko build --bare --platform=all -t latest -t ${{ github.sha }} -t ${{github.ref_name}} ./cmd/konnector)
         echo "built ${img}"
         cosign sign ${img} \
@@ -47,14 +68,39 @@ jobs:
             -a run_id=${{ github.run_id }} \
             -a run_attempt=${{ github.run_attempt }}
 
-    - name: Publish and sign example-backend image
+    # Build and push backend image using Dockerfile (includes frontend)
+    # Note: Backend image uses Dockerfile to include both Go backend + Vue.js frontend
+    # while konnector continues to use ko for Go-only builds
+    - name: Build and push backend image
+      uses: docker/build-push-action@v5
+      id: build
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64
+        push: true
+        tags: |
+          ghcr.io/${{ github.repository_owner }}/backend:latest
+          ghcr.io/${{ github.repository_owner }}/backend:${{ github.sha }}
+          ghcr.io/${{ github.repository_owner }}/backend:${{ github.ref_name }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        build-args: |
+          LDFLAGS=${{ env.LDFLAGS }}
+        labels: |
+          org.opencontainers.image.title=Kube Bind Backend
+          org.opencontainers.image.description=Kube Bind backend with integrated Vue.js frontend
+          org.opencontainers.image.source=https://github.com/${{ github.repository }}
+          org.opencontainers.image.revision=${{ github.sha }}
+          org.opencontainers.image.version=${{ github.ref_name }}
+
+    # Sign the backend image
+    - name: Sign backend image
       env:
-        KO_DOCKER_REPO: ghcr.io/${{ github.repository_owner }}/example-backend
         COSIGN_EXPERIMENTAL: 'true'
       run: |
-        echo "${{ github.token }}" | ko login ghcr.io --username "${{ github.actor }}" --password-stdin
-        img=$(ko build --bare --platform=all -t latest -t ${{ github.sha }} -t ${{github.ref_name}} ./cmd/example-backend)
-        echo "built ${img}"
+        img="ghcr.io/${{ github.repository_owner }}/backend@${{ steps.build.outputs.digest }}"
+        echo "signing ${img}"
         cosign sign ${img} \
             --yes \
             -a sha=${{ github.sha }} \

.gitignore

@@ -14,4 +14,10 @@ coverage.*
 /dex
 /bin
 docs/generators/cli-doc/cli-doc
-dex/
+dex/
+
+# Frontend dependencies and build
+web/node_modules/
+web/dist/
+web/.vite/
+web/*.tsbuildinfo

Dockerfile

@@ -12,4 +12,61 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-FROM golang:1.24.0 AS builder
+FROM golang:1.24.0 AS go-build-env
+WORKDIR /app
+
+# Accept build arguments
+ARG LDFLAGS
+
+RUN apt-get update && apt-get install -y make jq
+
+# <- COPY go.mod and go.sum files to the workspace
+COPY go.mod .
+COPY go.sum .
+
+# COPY the source code as the last step
+COPY . .
+
+# Build with custom LDFLAGS if provided, otherwise use make build
+RUN if [ -n "$LDFLAGS" ]; then \
+        echo "Building with LDFLAGS: $LDFLAGS"; \
+        go build -ldflags="$LDFLAGS" -o bin/backend ./cmd/backend; \
+    else \
+        make build; \
+    fi
+
+# Use node:lts-alpine for better compatibility and smaller size
+FROM node:20.18.0-alpine3.20 AS ui-build-env
+WORKDIR /app
+
+# Install build dependencies needed for native modules
+RUN apk add --no-cache python3 make g++ 
+
+# Copy package files
+COPY ./web/package*.json ./
+COPY ./web/.npmrc ./
+
+RUN npm install
+
+# Install dependencies with specific flags to handle optional deps and architecture issues
+RUN npm ci --prefer-offline --no-audit --no-fund --no-optional
+
+# Copy the Vue app files
+COPY ./web .
+
+# Set environment to avoid native dependency issues
+ENV NODE_ENV=production
+ENV VITE_BUILD_TARGET=docker
+
+# Building UI with Docker-specific config
+RUN npm run build
+
+FROM alpine:3.22.1
+RUN apk --update add ca-certificates
+
+COPY --from=go-build-env /app/bin/backend /bin
+COPY --from=ui-build-env /app/dist /www
+
+
+
+ENTRYPOINT ["/bin/backend"]

README.md

@@ -62,6 +62,36 @@ All the actions shown between the clusters are done by the konnector, except: th
 
 To get familiar with setting up the environment, please check out docs at [kube-bind.io](https://docs.kube-bind.io/main/setup).
 
+### Web Frontend
+
+The project includes a modern Vue.js + TypeScript web frontend that's fully integrated with the Go backend. The frontend provides:
+
+- **SSO Authentication**: OAuth2/OIDC integration with the backend
+- **Multi-cluster Support**: Browse resources across different clusters  
+- **Resource Management**: Browse and bind available Kubernetes resources
+- **Modern UI**: Responsive design built with Vue.js 3 and TypeScript
+
+#### Quick Start (Integrated)
+```bash
+# Build frontend and run integrated server
+./scripts/run-frontend.sh
+go run ./cmd/backend --listen-port=8080
+
+# Visit http://localhost:8080 for the complete application
+```
+
+#### Development Mode
+```bash
+# Option 1: Integrated (recommended)
+cd web && npm run build && cd .. && go run ./cmd/backend
+
+# Option 2: Separate servers with hot reload  
+go run ./cmd/backend &
+cd web && npm run dev
+```
+
+See [web/README.md](./web/README.md) for detailed frontend documentation.
+
 ## API Changes in coming v0.5.0 release
 
 Version v0.5.0 includes significant architectural improvements to the API structure:

backend/http/handler.go

@@ -17,7 +17,6 @@ limitations under the License.
 package http
 
 import (
-	"bytes"
 	"context"
 	"encoding/base64"
 	"encoding/json"
@@ -42,6 +41,7 @@ import (
 	"github.com/kube-bind/kube-bind/backend/kubernetes"
 	"github.com/kube-bind/kube-bind/backend/kubernetes/resources"
 	"github.com/kube-bind/kube-bind/backend/session"
+	"github.com/kube-bind/kube-bind/backend/spaserver"
 	"github.com/kube-bind/kube-bind/backend/template"
 	bindversion "github.com/kube-bind/kube-bind/pkg/version"
 	kubebindv1alpha2 "github.com/kube-bind/kube-bind/sdk/apis/kubebind/v1alpha2"
@@ -73,6 +73,8 @@ type handler struct {
 
 	client      *http.Client
 	kubeManager *kubernetes.Manager
+
+	frontend string
 }
 
 func NewHandler(
@@ -82,6 +84,7 @@ func NewHandler(
 	schemaSource string,
 	scope kubebindv1alpha2.InformerScope,
 	mgr *kubernetes.Manager,
+	frontend string,
 ) (*handler, error) {
 	return &handler{
 		oidc:                provider,
@@ -90,6 +93,7 @@ func NewHandler(
 		providerPrettyName:  providerPrettyName,
 		testingAutoSelect:   testingAutoSelect,
 		schemaSource:        schemaSource,
+		frontend:            frontend,
 		scope:               scope,
 		client:              http.DefaultClient,
 		kubeManager:         mgr,
@@ -99,7 +103,7 @@ func NewHandler(
 }
 
 func (h *handler) AddRoutes(mux *mux.Router) {
-	// Server contains double routes for when backend is multi-cluster aware or single cluster.
+	// API routes - Server contains double routes for when backend is multi-cluster aware or single cluster.
 	// When called multi-cluster aware route in single cluster mode, it will ignore cluster parameter.
 	mux.HandleFunc("/api/clusters/{cluster}/exports", h.handleServiceExport).Methods("GET")
 	mux.HandleFunc("/api/exports", h.handleServiceExport).Methods("GET")
@@ -115,6 +119,18 @@ func (h *handler) AddRoutes(mux *mux.Router) {
 
 	mux.HandleFunc("/api/callback", h.handleCallback).Methods("GET")
 	mux.HandleFunc("/api/healthz", h.handleHealthz).Methods("GET")
+
+	if strings.HasPrefix(h.frontend, "http://") {
+		spaserver, err := spaserver.NewSPAReverseProxyServer(h.frontend)
+		if err != nil {
+			panic(fmt.Sprintf("failed to create SPA reverse proxy server: %v", err)) // Development only.
+		}
+		mux.PathPrefix("/").Handler(spaserver)
+	} else {
+		fileSystem := http.Dir(h.frontend)
+		mux.PathPrefix("/").Handler(spaserver.NewSPAFileServer(fileSystem))
+	}
+
 }
 
 func (h *handler) handleHealthz(w http.ResponseWriter, r *http.Request) {
@@ -148,7 +164,7 @@ func (h *handler) handleServiceExport(w http.ResponseWriter, r *http.Request) {
 			Kind:       "BindingProvider",
 		},
 		Version:            ver,
-		ProviderPrettyName: "example-backend",
+		ProviderPrettyName: "backend",
 		AuthenticationMethods: []kubebindv1alpha2.AuthenticationMethod{
 			{
 				Method: "OAuth2CodeGrant",
@@ -293,9 +309,9 @@ func (h *handler) handleCallback(w http.ResponseWriter, r *http.Request) {
 
 	http.SetCookie(w, session.MakeCookie(r, cookieName, encoded, secure, 1*time.Hour))
 	if authCode.ProviderClusterID == "" {
-		http.Redirect(w, r, "/api/resources?s="+cookieName, http.StatusFound)
+		http.Redirect(w, r, "/resources?s="+cookieName, http.StatusFound)
 	} else {
-		http.Redirect(w, r, "/api/clusters/"+authCode.ProviderClusterID+"/resources?s="+cookieName, http.StatusFound)
+		http.Redirect(w, r, "/clusters/"+authCode.ProviderClusterID+"/resources?s="+cookieName, http.StatusFound)
 	}
 }
 
@@ -379,35 +395,31 @@ func (h *handler) handleResources(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	var result []UISchema
+	result := kubebindv1alpha2.BindableResourcesResponse{}
 	for _, item := range exportedSchemas {
-		result = append(result, UISchema{
-			Name:    item.GetName(),
-			Kind:    item.Spec.Names.Kind,
-			Scope:   string(item.Spec.Scope),
-			Version: item.Spec.Versions[0].Name,
-			Group:   item.Spec.Group,
+
+		result.Resources = append(result.Resources, kubebindv1alpha2.BindableResource{
+			Name:       item.GetName(),
+			Kind:       item.Spec.Names.Kind,
+			Scope:      string(item.Spec.Scope),
+			APIVersion: item.Spec.Versions[0].Name,
+			Group:      item.Spec.Group,
 			// Important: This MUST be used as UI button class in the url, so tests can 'click it' based on it.
 			Resource:  item.Spec.Names.Plural,
 			SessionID: sessionID,
 		})
 	}
 
-	bs := bytes.Buffer{}
-	if err := resourcesTemplate.Execute(&bs, struct {
-		Cluster string
-		Schemas []UISchema
-	}{
-		Cluster: providerCluster,
-		Schemas: result,
-	}); err != nil {
-		logger.Error(err, "failed to execute template")
+	bs, err := json.Marshal(&result)
+	if err != nil {
+		logger.Error(err, "failed to marshal resources")
 		http.Error(w, "internal error", http.StatusInternalServerError)
 		return
 	}
 
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	w.Write(bs.Bytes()) //nolint:errcheck
+	w.Header().Set("Content-Type", "application/json")
+	w.Write(bs) //nolint:errcheck
+
 }
 
 func (h *handler) handleBind(w http.ResponseWriter, r *http.Request) {

backend/options/options.go

@@ -61,6 +61,10 @@ type ExtraOptions struct {
 
 	TestingAutoSelect         string
 	TestingSkipNameValidation bool
+
+	// If ControllerFrontend starts with http:// it is treated as a URL to a SPA server
+	// Else - it is treated as a path to static files to be served.
+	Frontend string
 }
 
 type completedOptions struct {
@@ -95,6 +99,7 @@ func NewOptions() *Options {
 			ClusterScopedIsolation: string(kubebindv1alpha2.IsolationPrefixed),
 			ServerURL:              "",
 			SchemaSource:           CustomResourceDefinitionSource.String(),
+			Frontend:               "/www",
 		},
 	}
 }
@@ -138,6 +143,7 @@ func (options *Options) AddFlags(fs *pflag.FlagSet) {
 	fs.StringVar(&options.ExternalAddress, "external-address", options.ExternalAddress, "The external address for the service provider cluster, including https:// and port. If not specified, service account's hosts are used.")
 	fs.StringVar(&options.ExternalCAFile, "external-ca-file", options.ExternalCAFile, "The external CA file for the service provider cluster. If not specified, service account's CA is used.")
 	fs.StringVar(&options.TLSExternalServerName, "external-server-name", options.TLSExternalServerName, "The external (TLS) server name used by consumers to talk to the service provider cluster. This can be useful to select the right certificate via SNI.")
+	fs.StringVar(&options.Frontend, "frontend", options.Frontend, "If starts with http:// it is treated as a URL to a SPA server Else - it is treated as a path to static files to be served.")
 
 	fs.StringVar(&options.Provider, "multicluster-runtime-provider", options.Provider,
 		fmt.Sprintf("The multicluster runtime provider. Possible values are: %v", sets.List(sets.Set[string](sets.StringKeySet(providerAliases)))),

backend/server.go

@@ -118,6 +118,7 @@ func NewServer(ctx context.Context, c *Config) (*Server, error) {
 		c.Options.SchemaSource,
 		kubebindv1alpha2.InformerScope(c.Options.ConsumerScope),
 		s.Kubernetes,
+		s.Config.Options.Frontend,
 	)
 	if err != nil {
 		return nil, fmt.Errorf("error setting up HTTP Handler: %w", err)