[Added] Setup for running production in docker-compose

docker-compose.yml

@@ -0,0 +1,8 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      target: production
+    ports:
+      - "4200:80"

frontend/.devcontainer/Dockerfile

@@ -1,21 +0,0 @@
-FROM node:22-bookworm-slim
-
-ARG WORKDIR
-WORKDIR ${WORKDIR}
-
-RUN apt-get update && \
-    apt-get install -y git && \
-    apt-get clean && \
-    rm -rf /var/lib/apt/lists/*
-
-# Install Angular CLI globally
-RUN npm install -g @angular/cli
-
-# Switching user so it doesn't use root
-# If root adds files, it takes ownership, making them unremovable on the host except by using sudo
-# node tranfers ownership to the host user
-USER node
-
-EXPOSE 4200
-
-CMD ["tail","-f","/dev/null"]

frontend/.devcontainer/devcontainer.json

@@ -2,11 +2,12 @@
   "name": "Quiz Frontend",
   
   "build": {
-    "context": ".",
+    "context": "..",
-    "dockerfile": "Dockerfile",
+    "dockerfile": "../Dockerfile",
     "args": {
-      "WORKDIR": "/app"
+      // "WORKDIR": "/app"
-    }
+    },
+    "target": "development"
   },
   "runArgs": [
     "--name=quiz-frontend-dev-cont",

frontend/.devcontainer/oldDockerfile.txt

@@ -0,0 +1,21 @@
+# FROM node:22-bookworm-slim
+
+# ARG WORKDIR
+# WORKDIR ${WORKDIR}
+
+# RUN apt-get update && \
+#     apt-get install -y git && \
+#     apt-get clean && \
+#     rm -rf /var/lib/apt/lists/*
+
+# # Install Angular CLI globally
+# RUN npm install -g @angular/cli
+
+# # Switching user so it doesn't use root
+# # If root adds files, it takes ownership, making them unremovable on the host except by using sudo
+# # node tranfers ownership to the host user
+# USER node
+
+# EXPOSE 4200
+
+# CMD ["tail","-f","/dev/null"]

frontend/.dockerignore

@@ -0,0 +1,9 @@
+node_modules/
+.git/
+.gitignore
+README.md
+LICENSE
+.vscode/
+Dockerfile*
+docker-compose*
+npm-debug.log

frontend/Dockerfile

@@ -0,0 +1,31 @@
+FROM node:22-bookworm-slim AS base
+WORKDIR /app
+ENV NG_CLI_ANALYTICS=ci
+RUN npm install -g @angular/cli
+
+#--- Development
+FROM base AS development
+RUN apt-get update && \
+    apt-get install -y git && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+# Switching user so it doesn't use root
+# If root adds files, it takes ownership, making them unremovable on the host except by using sudo
+# node tranfers ownership to the host user
+USER node
+EXPOSE 4200
+CMD ["tail","-f","/dev/null"]
+
+#--- Building
+FROM base AS build
+COPY package*.json ./
+RUN npm install
+# Copied here, since the the Development setup uses a bind volume instead
+COPY . .
+RUN npm run build --prod
+
+#--- Production
+FROM nginx:alpine AS production
+COPY --from=build /app/dist/quiz/browser /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]