sighupio · AndreaDellaValle · Apr 7, 2023 · Apr 7, 2023 · Apr 7, 2023 · Apr 13, 2023
diff --git a/.tool-versions b/.tool-versions
@@ -7,7 +7,7 @@ kind 0.17.0
 kubectl 1.26.0
 make 4.1
 mkcert 1.4.4
-nodejs 18.0.0
+nodejs 16.20.0
 shellcheck 0.9.0
 tilt 0.31.1
 yq 4.30.8

diff --git a/Dockerfile b/Dockerfile
@@ -1,13 +1,3 @@
-## UI ##
-FROM node:18-alpine3.17 as ui-builder
-RUN mkdir /app
-COPY web-client /app
-
-ENV NODE_OPTIONS=--openssl-legacy-provider
-
-WORKDIR /app
-RUN yarn install && yarn build
-
 ## BACKEND ##
 FROM golang:1.19.5-alpine3.17 as go-base
 
@@ -39,15 +29,12 @@ RUN go mod download
 
 COPY cmd cmd
 COPY internal internal
-COPY static static
 
 FROM go-base as development
-COPY --from=ui-builder /app/build /app/static/build
 
 ENTRYPOINT ["go", "run", "cmd/run-server.go"]
 
 FROM go-base as builder
-COPY --from=ui-builder /app/build /app/static/build
 RUN go build --tags=release -o permission-manager cmd/run-server.go
 
 FROM scratch as release

diff --git a/Dockerfile-ui b/Dockerfile-ui
@@ -0,0 +1,25 @@
+## PERMISSION MANAGER UI ##
+
+# DEVELOPMENT
+FROM node:18-alpine3.17 as ui-development
+RUN mkdir /app
+COPY web-client /app
+
+ENV NODE_OPTIONS=--openssl-legacy-provider
+
+WORKDIR /app
+RUN yarn install && yarn build
+
+ENTRYPOINT ["yarn", "start"]
+
+# RELEASE
+# TODO test this draft and convert it for production
+FROM nginx:latest as release
+
+COPY --from=ui-development /app/build /usr/share/nginx/html
+
+COPY --from=ui-development /app/nginx.conf etc/nginx/nginx.conf
+
+EXPOSE 4001
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/Tiltfile b/Tiltfile
@@ -13,7 +13,6 @@ docker_build_with_restart(
     sync("./internal", "/app/internal"),
     sync("./go.mod", "/app/go.mod"),
     sync("./go.sum", "/app/go.sum"),
-    sync("./web-client", "/app/web-client"),
   ],
   build_args={
     "CLUSTER_NAME": os.getenv("CLUSTER_NAME"),
@@ -25,14 +24,32 @@ docker_build_with_restart(
   entrypoint=["go", "run", "cmd/run-server.go"]
 )
 
+docker_build(
+  "permission-manager-ui-image:local-dev",
+  ".",
+  dockerfile="Dockerfile-ui",
+  target="ui-development",
+  live_update=[
+    sync("./web-client", "/app/web-client"),
+  ],
+  build_args={
+    "CLUSTER_NAME": os.getenv("CLUSTER_NAME"),
+    "CONTROL_PLANE_ADDRESS": os.getenv("CONTROL_PLANE_ADDRESS"),
+    "BASIC_AUTH_PASSWORD": os.getenv("BASIC_AUTH_PASSWORD"),
+    "NAMESPACE": os.getenv("NAMESPACE"),
+    "PORT": os.getenv("PORT"),
+  }
+)
+
 k8s_yaml(
   helm(
     './helm_chart',
     name='permission-manager',
     namespace='permission-manager',
     values='development/helm/values.yaml',
     set=['config.controlPlaneAddress=' + os.getenv("CONTROL_PLANE_ADDRESS")]
-  ))
+  )
+)
 
 k8s_resource(
   workload="permission-manager",
@@ -42,3 +59,12 @@ k8s_resource(
   # objects=[] + cms,
   labels="control-plane"
 )
+
+k8s_resource(
+  workload="permission-manager-ui",
+  links=[
+    link("https://permission-manager.dev/", "permission-manager-ui"),
+  ],
+  # objects=[] + cms,
+  labels="front-end"
+)
diff --git a/development/helm/values.yaml b/development/helm/values.yaml
@@ -60,7 +60,7 @@ ingress:
   hosts:
     - host: permission-manager.dev
       paths:
-        - path: /
+        - path: /api/
           pathType: ImplementationSpecific
   tls:
     - secretName: permission-manager.dev-tls
@@ -105,6 +105,8 @@ config:
   # Password for basic auth to access the UI
   basicAuthPassword: "admin"
 
+  initialDelaySeconds: 60
+
   templates:
     - name: operation
       rules:

diff --git a/development/utils.sh b/development/utils.sh
@@ -43,5 +43,5 @@ function setup_certs {
 # This function will start the ctlptl registry (which is local registry used by Tilt) and the kind cluster.
 function start {
   echo "Starting cluster and local registry..."
-  docker start permission-manager-kind-registry permission-manager-kind-control-plane
+  docker start permission-manager-kind-registry permission-manager-kind-control-plane permission-manager-ui
 }
diff --git a/helm_chart/templates/deployment-ui.yaml b/helm_chart/templates/deployment-ui.yaml
@@ -0,0 +1,69 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "permission-manager.fullname" . }}-ui
+  labels:
+    {{- include "permission-manager.labels" . | nindent 4 }}
+spec:
+{{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+{{- end }}
+  selector:
+    matchLabels:
+      {{- include "permission-manager.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+    {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+    {{- end }}
+      labels:
+        {{- include "permission-manager.selectorLabels" . | nindent 8 }}
+        permission-manager: ui
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "permission-manager.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: permission-manager-ui-image:local-dev
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          env:
+            - name: NAMESPACE
+              valueFrom:
+                fieldRef:
+                  fieldPath: metadata.namespace
+          envFrom:
+            - secretRef:
+                name: {{ include "permission-manager.fullname" . }}
+          ports:
+            - name: http
+              containerPort: 4001
+              protocol: TCP
+          livenessProbe:
+            initialDelaySeconds: {{ .Values.config.initialDelaySeconds }}
+            tcpSocket:
+              port: 4001
+          readinessProbe:
+            tcpSocket:
+              port: 4001
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
diff --git a/helm_chart/templates/deployment.yaml b/helm_chart/templates/deployment.yaml
@@ -46,6 +46,7 @@ spec:
               containerPort: 4000
               protocol: TCP
           livenessProbe:
+            initialDelaySeconds: {{ .Values.config.initialDelaySeconds }}
             tcpSocket:
               port: 4000
           readinessProbe:

diff --git a/helm_chart/templates/ingress.yaml b/helm_chart/templates/ingress.yaml
@@ -57,5 +57,12 @@ spec:
               servicePort: {{ $svcPort }}
               {{- end }}
           {{- end }}
+          - path: /
+            pathType: ImplementationSpecific
+            backend:
+              service:
+                name: permission-manager-ui
+                port:
+                  number: 80
     {{- end }}
 {{- end }}
diff --git a/helm_chart/templates/service-ui.yaml b/helm_chart/templates/service-ui.yaml
@@ -0,0 +1,21 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: permission-manager-ui
+  labels:
+    {{- include "permission-manager.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: 4001
+      protocol: TCP
+      name: http
+      {{- if .Values.service.nodePort }}
+      nodePort: {{ .Values.service.nodePort }}
+      {{- else }}
+      nodePort: null
+      {{- end }}
+  selector:
+    {{- include "permission-manager.selectorLabels" . | nindent 4 }}
+    permission-manager: ui
diff --git a/helm_chart/values.yaml b/helm_chart/values.yaml
@@ -56,8 +56,10 @@ ingress:
   hosts:
     - host: permission-manager.domain.com
       paths:
-        - path: /
+        - path: /api/
           pathType: ImplementationSpecific
+        # - path: /
+        #   pathType: ImplementationSpecific
   # tls:
   #   - secretName: permission-manager-tls
   #     hosts:
@@ -101,6 +103,8 @@ config:
   # Password for basic auth to access the UI
   basicAuthPassword: ""
 
+  initialDelaySeconds: 0
+
   templates:
     - name: operation
       rules:

diff --git a/internal/server/server.go b/internal/server/server.go
@@ -1,9 +1,7 @@
 package server
 
 import (
-	"io/fs"
 	"log"
-	"net/http"
 	"os"
 
 	"github.com/go-playground/validator"
@@ -12,7 +10,6 @@ import (
 
 	"sighupio/permission-manager/internal/config"
 	"sighupio/permission-manager/internal/resources"
-	"sighupio/permission-manager/static"
 )
 
 func New(cfg config.Config) *echo.Echo {
@@ -48,17 +45,6 @@ func addMiddlewareStack(e *echo.Echo, cfg config.Config) {
 		Format: "method=${method}, uri=${uri}, status=${status}\n",
 	}))
 
-	fsys, err := fs.Sub(static.WebClient, "build")
-	if err != nil {
-		log.Fatal(err)
-	}
-
-	e.Group("/*", middleware.StaticWithConfig(middleware.StaticConfig{
-		Root:       ".",
-		Filesystem: http.FS(fsys),
-		HTML5:      true,
-	}))
-
 	e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
 			customContext := &AppContext{

diff --git a/web-client/.env b/web-client/.env
@@ -0,0 +1,2 @@
+REACT_APP_API_URL="https://permission-manager.dev/"
+REACT_APP_BASIC_AUTH_PASSWORD="admin"
diff --git a/web-client/README.md b/web-client/README.md
@@ -1,6 +1,6 @@
 # Permission manager UI
 
-app create using `create-react-app`
+app created using `create-react-app`
 
 ## usage
 
@@ -9,11 +9,17 @@ install dependencies
 ``` shell
 yarn install
 ```
+build the project (this let CRA to load the `.env` variables)
+``` shell
+sudo yarn build
+```
 
 run application
 
 ``` shell
 yarn start
 ```
 
-the application expect the api to run at <http://localhost:4000>
+Now you can access the UI on [localhost:4001](http://localhost:4001) and every time you save a file the app automatically reloads 💾 🔃
+### API URL
+the API URL is defined in the `.env` file by the `REACT_APP_API_URL` variable
diff --git a/web-client/nginx.conf b/web-client/nginx.conf
@@ -0,0 +1,13 @@
+events {}
+
+http {
+  server {
+    listen 4001;
+
+    location / {
+      root /usr/share/nginx/html;
+      index index.html;
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
diff --git a/web-client/package.json b/web-client/package.json
@@ -12,13 +12,13 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "react-select": "^3.0.4",
-    "react-simple-code-editor": "^0.9.14",
-    "react-spinners": "^0.6.1",
+    "react-simple-code-editor": "0.13.1",
+    "react-spinners": "0.13.8",
     "tailwindcss": "^1.1.2",
     "uuid": "^3.3.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "WATCHPACK_POLLING=true PORT=4001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -42,7 +42,7 @@
     "@reach/dialog": "^0.2.9",
     "@types/bluebird": "^3.5.27",
     "@types/jest": "^26.0.19",
-    "@types/node": "^14.14.16",
+    "@types/node": "16.18.20",
     "@types/prettier": "^1.18.1",
     "@types/prettyjson": "^0.0.29",
     "@types/reach__dialog": "^0.1.0",
@@ -55,7 +55,6 @@
     "@types/validator": "^10.11.2",
     "prettier": "^1.19.1",
     "sass": "1.3.0",
-    "typescript": "^3.9.7"
-  },
-  "proxy": "http://localhost:4000"
+    "typescript": "^4.3.4"
+  }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		REACT_APP_API_URL="https://permission-manager.dev/"
		REACT_APP_BASIC_AUTH_PASSWORD="admin"