Merge branch 'use-web-folder-instead-of-dist-folder' into 'main'

chore: use web folder instead of dist folder

See merge request flattrack/flattrack!385

.gitlab-ci.yml

@@ -13,8 +13,8 @@ variables:
   POSTGRES_USER: flattrack
   POSTGRES_PASSWORD: flattrack
   EXTRA_REGISTRIES: docker.io
-  IMAGE_NODE_ALPINE: docker.io/node:20-alpine3.18@sha256:32427bc0620132b2d9e79e405a1b27944d992501a20417a7f407427cc4c2b672
-  IMAGE_GOLANG_ALPINE: docker.io/golang:1.22.5-alpine3.19@sha256:0642d4f809abf039440540de1f0e83502401686e3946ed8e7398a1d94648aa6d
+  IMAGE_NODE_ALPINE: docker.io/node:20-alpine3.20@sha256:09dbe0a53523c2482d85a037efc6b0e8e8bb16c6f1acf431fe36aa0ebc871c06
+  IMAGE_GOLANG_ALPINE: docker.io/golang:1.22.5-alpine3.20@sha256:0d3653dd6f35159ec6e3d10263a42372f6f194c3dea0b35235d72aabde86486e
   IMAGE_PYTHON: docker.io/python:3.8-buster@sha256:04c3f641c2254c229fd2f704c5199ff4bea57d26c1c29008ae3a4afddde98709
   IMAGE_GOLANGCI_LINT: docker.io/golangci/golangci-lint:v1.59.1-alpine@sha256:2a5293b5d25319a515db44f00c7e72466a78488106fbb995730580ef25fb8b20
   COSIGN_YES: "true"
@@ -52,12 +52,7 @@ variables:
 .setup-testing-repo: &setup-testing-repo |
   echo 'https://dl-cdn.alpinelinux.org/alpine/edge/testing' | tee -a /etc/apk/repositories
 
-build-container:
-  only:
-    refs:
-      - main
-      - tags
-  stage: build
+.build-container: &build-container
   image:
     name: $IMAGE_GOLANG_ALPINE
     entrypoint: [""]
@@ -70,17 +65,35 @@ build-container:
   before_script:
     - set -x
     - *setup-testing-repo
-    - apk add --no-cache curl cosign ko git
+    - apk add --no-cache curl cosign ko git crane
     - export KO_DOCKER_REPO="$(echo ${KO_DOCKER_REPO} | tr '[:upper:]' '[:lower:]')"
     - ko login "${CI_REGISTRY}" -u "${CI_REGISTRY_USER}" -p "${CI_REGISTRY_PASSWORD}"
     - *image-set-build-env
   script:
-    - |
-      mkdir -p ./kodata/{web/dist,}
-      cp -r ./web/dist ./kodata/web
-    - ./hack/publish.sh --sign
+    - ./hack/publish.sh $PUBLISH_FLAGS
+
+build-container-release:
+  <<: *build-container
+  stage: build
+  only:
+    refs:
+      - main
+      - tags
+  variables:
+    PUBLISH_FLAGS: "--sign --debug"
   needs:
-    - build-frontend
+    - build-frontend-release
+
+build-container-test:
+  <<: *build-container
+  stage: codequality
+  variables:
+    PUBLISH_FLAGS: "--tarball-test-only --debug"
+  only:
+    refs:
+      - merge_requests
+  needs:
+    - build-frontend-test
 
 copy-container-image-to-dockerhub:
   only:
@@ -103,12 +116,7 @@ copy-container-image-to-dockerhub:
         done
       done
 
-build-frontend:
-  only:
-    refs:
-      - main
-      - tags
-  stage: build
+.build-frontend: &build-frontend
   retry: 2
   image: $IMAGE_NODE_ALPINE
   before_script:
@@ -118,19 +126,27 @@ build-frontend:
     - npm i
   script:
     - npm run build
-  after_script:
-    - |
-      if [[ ! -z "$CI_COMMIT_TAG" ]]; then
-        mkdir -p "${RELEASE_FOLDER_NAME}/dist"
-        cd web/dist
-        cp -R . "${RELEASE_FOLDER_NAME}/dist"
-      fi
   artifacts:
     expire_in: 1 day
     paths:
-      - web/dist
+      - kodata/web
       - flattrack*/
 
+build-frontend-release:
+  <<: *build-frontend
+  stage: build
+  only:
+    refs:
+      - main
+      - tags
+
+build-frontend-test:
+  <<: *build-frontend
+  stage: codequality
+  only:
+    refs:
+      - merge_requests
+
 test-backend-e2e:
   only:
     refs:

docs/configuration.md

@@ -10,7 +10,7 @@ FlatTrack is solely configured to run with environment variables (or a `.env` fi
 | `APP_PORT` or `PORT`                 | The port for web traffic to bind to                                                                                           | `:8080` *             |
 | `APP_PORT_METRICS`                   | The port for metrics traffic to bind to                                                                                       | `:2112` *             |
 | `APP_PORT_HEALTH`                    | The port for web traffic to bind to                                                                                           | `:8081` *             |
-| `APP_DIST_FOLDER`                    | The location of the frontend web assets                                                                                       | `./dist`              |
+| `APP_WEB_FOLDER`                     | The location of the frontend web assets                                                                                       | `./kodata/web`        |
 | `APP_URL`                            | The location of the site                                                                                                      | `""`                  |
 | `APP_DB_HOST`                        | The Postgres host to connect to                                                                                               | `localhost`           |
 | `APP_DB_PORT`                        | The Postgres port use                                                                                                         | `5432`                |

example.env

@@ -3,7 +3,7 @@ APP_DB_PASSWORD=flattrack
 APP_DB_DATABASE=flattrack
 APP_DB_HOST=localhost
 
-APP_DIST_FOLDER=./web/dist
+APP_DIST_FOLDER=./kodata/web
 APP_URL=http://localhost:8080
 
 APP_METRICS_ENABLED=false

hack/build-frontend.sh

@@ -5,8 +5,6 @@ set -o nounset
 set -o pipefail
 
 cd "$(git rev-parse --show-toplevel)/web" || exit 1
-rm -rf ./dist ../kodata/web
+rm -rf ../kodata/web
 
 npm run build
-
-cp -r ./dist ../kodata/web

hack/publish.sh

@@ -13,6 +13,13 @@ fi
 if echo "${@:-}" | grep -q '\-\-sign'; then
     SIGN=true
 fi
+if echo "${@:-}" | grep -q '\-\-local'; then
+    KO_FLAGS="--local $KO_FLAGS"
+fi
+if echo "${@:-}" | grep -q '\-\-tarball-test-only'; then
+    TEST_TARBALL=true
+    KO_FLAGS="--tarball /tmp/flattrack.tar --platform=linux/amd64 --push=false $KO_FLAGS"
+fi
 if echo "${@:-}" | grep -q '\-\-insecure'; then
     KO_FLAGS="--insecure-registry $KO_FLAGS"
 fi
@@ -50,3 +57,21 @@ if [ "${SIGN:-}" = true ]; then
     cosign download sbom "$IMAGE" > /tmp/sbom-spdx.json
     cosign attest -y --recursive --predicate /tmp/sbom-spdx.json "$IMAGE"
 fi
+
+if [ "${TEST_TARBALL:-}" = true ]; then
+    crane registry serve --address :5001&
+    REGPID=$!
+    IMG=$(crane --insecure push /tmp/flattrack.tar localhost:5001/ft)
+
+    RESULT="$(crane export "$IMG" - | tar -tvf - \
+        | grep -E '(etc/passwd|usr/share/zoneinfo|etc/ssl/certs|ko-app/flattrack|ko/web/assets/.*\.js|ko/migrations/.*\.sql)')"
+    CODE=$?
+    if [ ! $CODE -eq 0 ]; then
+        echo "error: failed to build image correctly" >/dev/stderr
+        echo "$RESULT" >/dev/stderr
+        kill "$REGPID"
+        exit 1
+    fi
+    echo "success: image is built correctly"
+    kill "$REGPID"
+fi

internal/common/common.go

@@ -280,22 +280,26 @@ func SetFirstOrSecond(first string, second string) string {
 	return second
 }
 
-// GetAppDistFolder ...
+// GetAppWebFolder ...
 // return the path to the folder containing the frontend assets
-func GetAppDistFolder() string {
+func GetAppWebFolder() string {
 	if AppBuildMode == "production" || AppBuildMode == "staging" {
 		return AppAssetsFolder
 	}
-	if envSet := GetEnvOrDefault("APP_DIST_FOLDER", ""); envSet != "" {
+	if envSet := GetEnvOrDefault("APP_WEB_FOLDER", ""); envSet != "" {
 		return envSet
 	}
-	pwd, _ := os.Getwd()
-	return path.Join(pwd, "web", "dist")
+	pwd, err := os.Getwd()
+	if err != nil {
+		panic(err)
+	}
+	return path.Join(pwd, "kodata", "web")
 }
 
 // RegexMatchName ...
 // regex check for valid name string
 func RegexMatchName(name string) bool {
+	// TODO(help) support non-English names
 	matches, _ := regexp.MatchString(`^([ \\u00c0-\\u01ffa-zA-Z'\-])+$`, name)
 	return matches
 }

internal/httpserver/httpserver.go

@@ -82,7 +82,7 @@ func NewHTTPServer(
 		SetupMessage: common.GetAppSetupMessage(),
 		LoginMessage: common.GetAppLoginMessage(),
 	}
-	router.PathPrefix("/").Handler(frontendHandler(common.GetAppDistFolder(), passthrough)).Methods(http.MethodGet)
+	router.PathPrefix("/").Handler(frontendHandler(common.GetAppWebFolder(), passthrough)).Methods(http.MethodGet)
 	c := cors.New(cors.Options{
 		AllowedOrigins:   []string{"*"},
 		AllowedHeaders:   []string{"Accept", "Content-Type", "Authorization", "User-Agent", "Accept-Encoding"},

web/package.json

@@ -4,8 +4,8 @@
         "private": true,
         "scripts": {
                 "start": "vite",
-                "build": "vite build",
-                "build-watch": "vite build --watch",
+                "build": "vite build --outDir ../kodata/web --emptyOutDir",
+                "build-watch": "vite build --outDir ../kodata/web --emptyOutDir --watch",
                 "lint": "eslint --ext .js,.vue src",
                 "lintfix": "eslint --ext .js,.vue src --fix"
         },