fix: correct Docker build workflow and API image configuration

Author: mbertelsen

.github/workflows/docker-build.yml

@@ -9,6 +9,7 @@ on:
 
 env:
   REGISTRY: tpsappscriptingacr.azurecr.io
+  IMAGE_EDITOR: app-scripting-editor
   IMAGE_API: app-scripting-editor-api
 
 jobs:
@@ -36,20 +37,33 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      # ---- Build API (Node/Express) image ----
-      # NOTE: Your API Dockerfile copies the SPA from ${REGISTRY}/app-scripting-editor:latest.
-      # Make sure that image exists in ACR, or switch to the "self-contained" Dockerfile approach below.
-      - name: Build & push API image (Node/Express + SPA)
+      # ---- Step 1: Build Frontend (Editor) image first ----
+      - name: Build & push Editor image (Frontend/nginx)
         uses: docker/build-push-action@v6
         with:
           context: .
-          file: ./Dockerfile            # change if your API Dockerfile lives elsewhere
+          file: ./Dockerfile
           push: true
           build-args: |
-            REGISTRY=${{ env.REGISTRY }}
             VITE_APP_VERSION=1.0.0
             VITE_APP_BUILD_TIME=${{ github.event.head_commit.timestamp }}
             VITE_APP_COMMIT_SHA=${{ github.sha }}
+          tags: |
+            ${{ env.REGISTRY }}/${{ env.IMAGE_EDITOR }}:latest
+            ${{ env.REGISTRY }}/${{ env.IMAGE_EDITOR }}:${{ github.sha }}
+          cache-from: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_EDITOR }}:buildcache
+          cache-to: type=registry,ref=${{ env.REGISTRY }}/${{ env.IMAGE_EDITOR }}:buildcache,mode=max
+
+      # ---- Step 2: Build API (Node/Express + Frontend) image ----
+      # This uses the editor image we just built above
+      - name: Build & push API image (Node/Express + SPA)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./server/Dockerfile
+          push: true
+          build-args: |
+            REGISTRY=${{ env.REGISTRY }}
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_API }}:latest
             ${{ env.REGISTRY }}/${{ env.IMAGE_API }}:${{ github.sha }}

server/Dockerfile

@@ -2,27 +2,26 @@
 
 # 1) Use previously built editor image (pushed to registry) as web-build
 # This avoids requiring the 'editor/' directory in the Docker build context.
-ARG REGISTRY
+ARG REGISTRY=tpsappscriptingacr.azurecr.io
 FROM ${REGISTRY}/app-scripting-editor:latest AS web-build
 
 # 2) Build server
 FROM node:18-alpine AS server-build
 WORKDIR /srv
 COPY server/package.json server/package-lock.json* ./
 RUN if [ -f package-lock.json ]; then npm ci --production=false; else npm install --production=false; fi
-COPY server/ ./server
-WORKDIR /srv/server
+COPY server/ ./
 RUN npm run build
 
 # 3) Final image
 FROM node:18-alpine
 WORKDIR /app
 # Install production deps for server
-COPY server/package.json ./
+COPY server/package.json server/package-lock.json* ./
 RUN if [ -f package-lock.json ]; then npm ci --production; else npm install --production; fi
 
 # Copy built server
-COPY --from=server-build /srv/server/dist ./dist
+COPY --from=server-build /srv/dist ./dist
 
 # Copy built frontend from the editor image (nginx html location) so the server can serve it
 # The editor image places the built site at /usr/share/nginx/html