use different ui build strategy (#196)

* use different ui build strategy

* fix failing build test

* remove forgotten comment

Author: drewhammond

.dockerignore

@@ -0,0 +1,7 @@
+.vscode/
+.idea/
+.DS_Store
+dist/*
+*.iml
+!defaults.ini
+*.ini

.github/workflows/go-test.yml

@@ -13,19 +13,18 @@ jobs:
           cache-dependency-path: go.sum
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: 'npm'
-          cache-dependency-path: ui/package-lock.json
+          cache-dependency-path: ui/yarn.lock
       - name: Install dependencies
-        run: go get .
+        run: go mod download
       - name: Build UI
         working-directory: ./ui
         run: |
-          npm ci
-          npm run build
+          yarn install --frozen-lockfile
+          yarn run build
       - name: Build Backend
         run: |
-          go generate ./...
           go build -v ./...
       - name: Test
         run: go test -v ./...

.github/workflows/release.yml

@@ -27,19 +27,6 @@ jobs:
         with:
           go-version: '1.21'
           cache: true
-      -
-        name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'npm'
-          cache-dependency-path: ui/package-lock.json
-      -
-        name: Build UI
-        working-directory: ./ui
-        run: |
-          npm ci
-          npm run build
       -
         name: Run GoReleaser
         uses: goreleaser/goreleaser-action@v4

.gitignore

@@ -1,3 +1,15 @@
+.vscode/
+.idea/
+.DS_Store
+vendor/
+dist/*
+ui/dist/*
+!ui/dist/gitkeep
+*.iml
+debug.test
+coverage.out
+.*.swp
+node_modules/
 /bin/
 /*.ini
 !defaults.ini
@@ -6,6 +18,3 @@
 *.test
 *.xml
 *.swp
-
-# Goreleaser and UI artifacts
-/dist/

.goreleaser.yaml

@@ -2,10 +2,8 @@
 # Make sure to check the documentation at https://goreleaser.com
 before:
   hooks:
-    # You may remove this if you don't use go modules.
     - go mod tidy
-    # you may remove this if you don't need go generate
-    - go generate ./...
+    - make build-ui
 builds:
   -
     env:
@@ -18,9 +16,13 @@ builds:
       - arm64
     mod_timestamp: '{{ .CommitTimestamp }}'
     flags:
+      - -v
       - -trimpath
     ldflags:
-      - -s -w -X github.com/drewhammond/chefbrowser/internal/common/version.version={{.Version}} -X github.com/drewhammond/chefbrowser/internal/common/version.commitHash={{.Commit}} -X github.com/drewhammond/chefbrowser/internal/common/version.date={{.CommitDate}}
+      - -s -w
+      - -X github.com/drewhammond/chefbrowser/internal/common/version.version={{ .Version }}
+      - -X github.com/drewhammond/chefbrowser/internal/common/version.commitHash={{ .Commit }}
+      - -X github.com/drewhammond/chefbrowser/internal/common/version.date={{ .CommitDate }}
 release:
   draft: true
   replace_existing_draft: true

Dockerfile

@@ -1,22 +1,53 @@
+ARG BASE_IMAGE=alpine:3.18
 ARG USERNAME=chefbrowser
 ARG UID=1001
 ARG GID=1001
 
-FROM alpine:3.17 as alpine
+FROM $BASE_IMAGE as cb-base
 ARG USERNAME
 ARG UID
 ARG GID
 RUN apk add --update --no-cache ca-certificates shadow && \
     addgroup -g ${GID} ${USERNAME} && \
     adduser -u ${UID} -G ${USERNAME} --disabled-password --system ${USERNAME}
 
+###################
+# UI build stage
+###################
+FROM --platform=$BUILDPLATFORM node:20-alpine3.18 AS ui-builder
+WORKDIR /src
+COPY ["ui/package.json", "ui/yarn.lock", "./"]
+RUN yarn install --network-timeout 200000 && \
+    yarn cache clean
+
+COPY ["ui/", "."]
+
+ARG TARGETARCH
+RUN HOST_ARCH=$TARGETARCH NODE_ENV='production' NODE_ONLINE_ENV='online' NODE_OPTIONS=--max_old_space_size=8192 yarn run build
+
+###################
+# Go build stage
+###################
+FROM --platform=$BUILDPLATFORM golang:1.21 as go-builder
+WORKDIR /go/src/github.com/drewhammond/chefbrowser
+COPY go.* ./
+RUN go mod download
+
+COPY . .
+COPY --from=ui-builder /src/dist /go/src/github.com/drewhammond/chefbrowser/ui/dist
+ARG TARGETOS
+ARG TARGETARCH
+RUN GOOS=$TARGETOS GOARCH=$TARGETARCH make build-backend
+
+###################
+# Final stage
+###################
 FROM scratch
-ARG USERNAME
 ARG UID
 ARG GID
-COPY --from=alpine /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
-COPY --from=alpine /etc/passwd /etc/passwd
-COPY chefbrowser /go/bin/chefbrowser
+COPY --from=cb-base /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
+COPY --from=cb-base /etc/passwd /etc/passwd
+COPY --from=go-builder /go/src/github.com/drewhammond/chefbrowser/dist/chefbrowser /usr/local/bin/
 USER ${UID}:${GID}
 EXPOSE 8080
-ENTRYPOINT ["/go/bin/chefbrowser"]
+ENTRYPOINT ["/usr/local/bin/chefbrowser"]

Makefile

@@ -1,15 +1,17 @@
 BINARY_NAME = "chefbrowser"
 RELEASE?=dev
-GIN_MODE?=release
 DOCKER_NAMESPACE?=drewhammond
 DOCKER_TAG?=latest
-GOOS ?= $(shell go env GOOS)
-GOARCH ?= $(shell go env GOARCH)
-GOBUILD=CGO_ENABLED=0 go build -trimpath
+HOST_GOOS ?= $(shell go env GOOS)
+HOST_GOARCH ?= $(shell go env GOARCH)
 GIT_SHA=$(shell git rev-parse HEAD)
 DATE=$(shell date -u +'%Y-%m-%dT%H:%M:%SZ')
 BUILD_INFO_PATH="github.com/drewhammond/chefbrowser/internal/common/version"
 BUILD_INFO=-ldflags "-X $(BUILD_INFO_PATH).version=$(RELEASE) -X $(BUILD_INFO_PATH).commitHash=$(GIT_SHA) -X $(BUILD_INFO_PATH).date=$(DATE)"
+GOBUILD=CGO_ENABLED=0 GOOS=$(GOOS) GOARCH=$(GOARCH) go build -v -trimpath $(BUILD_INFO)
+CURRENT_DIR=$(shell pwd)
+DIST_DIR=$(CURDIR)/dist
+TARGET_ARCH?=linux/amd64
 
 .PHONY: lint
 lint:
@@ -25,23 +27,24 @@ fmt:
 
 .PHONY: ui-deps
 ui-deps:
-	cd $(CURDIR)/ui && npm ci
+	cd $(CURDIR)/ui && yarn install
 
 .PHONY: build
-build: build-ui
-	go generate ./...
-	$(GOBUILD) -o bin/${BINARY_NAME}-$(GOOS)-$(GOARCH) $(BUILD_INFO) main.go
+build: build-ui build-backend
+
+.PHONY: build-backend
+build-backend:
+	$(GOBUILD) -o $(DIST_DIR)/$(BINARY_NAME) .
 
 .PHONY: build-ui
 build-ui:
-	rm -rf $(CURDIR)/internal/app/ui/dist/assets
-	rm -f $(CURDIR)/internal/app/ui/dist/index.html
-	rm -f $(CURDIR)/internal/app/ui/dist/manifest.json
-	cd $(CURDIR)/ui && npm run build
+	docker build -t chefbrowser-ui --platform=$(TARGET_ARCH) --target ui-builder .
+	find $(CURDIR)/ui/dist -type f -not -name gitkeep -delete || true
+	docker run --platform=$(TARGET_ARCH) -v $(CURDIR)/ui/dist:/tmp/app --rm -t chefbrowser-ui sh -c 'cp -r ./dist/* /tmp/app/'
 
 .PHONY: build-linux
 build-linux:
-	GOOS=linux GOARCH=amd64 $(MAKE) build
+	GOOS=linux GOARCH=amd64 TARGET_ARCH=linux/amd64 $(MAKE) build
 
 .PHONY: build-docker
 build-docker: build-linux

go.mod

@@ -11,13 +11,11 @@ require (
 	github.com/labstack/echo/v4 v4.11.1
 	github.com/spf13/cobra v1.7.0
 	github.com/spf13/viper v1.16.0
-	github.com/stretchr/testify v1.8.4
 	go.uber.org/zap v1.25.0
 	golang.org/x/mod v0.12.0
 )
 
 require (
-	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/fsnotify/fsnotify v1.6.0 // indirect
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/hashicorp/hcl v1.0.0 // indirect
@@ -28,7 +26,6 @@ require (
 	github.com/mattn/go-isatty v0.0.19 // indirect
 	github.com/mitchellh/mapstructure v1.5.0 // indirect
 	github.com/pelletier/go-toml/v2 v2.0.9 // indirect
-	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/spf13/afero v1.9.5 // indirect
 	github.com/spf13/cast v1.5.1 // indirect
 	github.com/spf13/jwalterweatherman v1.1.0 // indirect

internal/app/ui/dist/.gitignore

@@ -2,7 +2,6 @@ package ui
 
 import (
 	"crypto/tls"
-	"embed"
 	"errors"
 	"fmt"
 	"html/template"
@@ -14,26 +13,18 @@ import (
 	"github.com/drewhammond/chefbrowser/internal/chef"
 	"github.com/drewhammond/chefbrowser/internal/common/logging"
 	"github.com/drewhammond/chefbrowser/internal/common/version"
+	"github.com/drewhammond/chefbrowser/ui"
 	"github.com/foolin/goview"
 	"github.com/foolin/goview/supports/echoview-v4"
 	"github.com/labstack/echo/v4"
 	"go.uber.org/zap"
 )
 
-// This instruction runs in the build scripts to drop the compiled frontend assets (JS, CSS, and manifest file)
-// It's probably not the best way to do this, so let me know if there's a better way to do this!
-//
-//go:generate pwd
-//go:generate ls -ltr ../../../ui/dist/
-//go:generate cp -v -r ../../../ui/dist/ ./dist
-//go:embed templates/* dist/*
-var ui embed.FS
-
-var viteFS = echo.MustSubFS(ui, "dist")
+var viteFS = echo.MustSubFS(ui.Embedded, "dist")
 
 func embeddedFH(config goview.Config, tmpl string) (string, error) {
 	path := filepath.Join(config.Root, tmpl)
-	bytes, err := ui.ReadFile(path + config.Extension)
+	bytes, err := ui.Embedded.ReadFile(path + config.Extension)
 	return string(bytes), err
 }
 
@@ -81,7 +72,7 @@ func (s *Service) RegisterRoutes() {
 	}
 
 	if s.config.App.AppMode == "production" {
-		mf, _ := ui.ReadFile("dist/manifest.json")
+		mf, _ := ui.Embedded.ReadFile("dist/manifest.json")
 		vCfg.Manifest = mf
 	}
 

internal/app/ui/routes.go

@@ -0,0 +1,3 @@
+node_modules
+.git
+Dockerfile

ui/.dockerignore

@@ -6,10 +6,9 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
+.yalc
+yalc.lock
 node_modules
-dist
-dist-ssr
 *.local
 
 # Editor directories and files

ui/.gitignore

@@ -0,0 +1,8 @@
+package ui
+
+import "embed"
+
+// Embedded contains embedded UI resources
+//
+//go:embed templates/* dist/*
+var Embedded embed.FS