Refactor backend to be API first, with dedicated frontend

Author: mjudeikis

.github/workflows/image.yaml

@@ -21,11 +21,25 @@ 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
 
@@ -37,6 +51,14 @@ jobs:
     - 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
@@ -54,14 +76,39 @@ jobs:
             -a run_id=${{ github.run_id }} \
             -a run_attempt=${{ github.run_attempt }}
 
-    - name: Publish and sign 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 }}/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/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

@@ -15,4 +15,10 @@ coverage.*
 /bin
 docs/generators/cli-doc/cli-doc
 apiserviceexport.yaml
-*.prod
+*.prod
+
+# 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"]

Makefile

@@ -379,6 +379,7 @@ deploy-docs: venv ## Deploy docs
 .PHONY: image-local
 image-local:
 	@echo "Building images locally with tag $(REV)"
+	@command -v docker >/dev/null 2>&1 || { echo "docker not found. Please install Docker"; exit 1; }
 	@command -v ko >/dev/null 2>&1 || { echo "ko not found. Install with: go install github.com/google/ko@latest"; exit 1; }
 
 	@echo "Building konnector image locally..."
@@ -389,11 +390,10 @@ image-local:
 		./cmd/konnector
 
 	@echo "Building backend image locally..."
-	KO_DOCKER_REPO=$(IMAGE_REPO) ko build \
-		--local \
-		-B \
-		-t $(REV) \
-		./cmd/backend
+	docker build \
+		--build-arg LDFLAGS="$(LDFLAGS)" \
+		-t $(IMAGE_REPO)/backend:$(REV) \
+		-f Dockerfile .
 
 	@echo "Successfully built local images:"
 	@echo "  $(IMAGE_REPO)/konnector:$(REV)"

README.md

@@ -58,6 +58,8 @@ There are several ways to communicate with us:
 
 All the actions shown between the clusters are done by the konnector, except: the pull at the start is done by the kubectl plugin that installs the konnector.
 
+See [web/README.md](./web/README.md) for detailed frontend documentation.
+
 ## Usage
 
 To get familiar with setting up the environment, please check out docs at [kube-bind.io](https://docs.kube-bind.io/main/setup).