From edca50699d514e6a1020231f8d2061ba9f6e8ac6 Mon Sep 17 00:00:00 2001
From: Sean Dombrofski <sdombrofski@gmail.com>
Date: Mon, 28 Apr 2025 10:24:02 -0400
Subject: [PATCH] dockerized frontend with a reference to backend in the
 docker-compose file we can use later. TODO: implement security for db and fix
 issues with main being further ahead in branch history than develop

---
 frontend/Dockerfile       | 77 +++++++++++++++++++++++++++++++++++++++
 frontend/README.Docker.md | 22 +++++++++++
 frontend/compose.yaml     | 62 +++++++++++++++++++++++++++++++
 frontend/nginx.conf       | 16 ++++++++
 4 files changed, 177 insertions(+)
 create mode 100644 frontend/Dockerfile
 create mode 100644 frontend/README.Docker.md
 create mode 100644 frontend/compose.yaml
 create mode 100644 frontend/nginx.conf

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..7f67638
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,77 @@
+# syntax=docker/dockerfile:1
+
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Dockerfile reference guide at
+# https://docs.docker.com/go/dockerfile-reference/
+
+# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7
+
+ARG NODE_VERSION=23.11.0
+
+################################################################################
+# Use node image for base image for all stages.
+FROM node:${NODE_VERSION}-alpine as base
+
+# Set working directory for all build stages.
+WORKDIR /usr/src/app
+
+
+################################################################################
+# Create a stage for installing production dependecies.
+FROM base as deps
+
+# Download dependencies as a separate step to take advantage of Docker's caching.
+# Leverage a cache mount to /root/.npm to speed up subsequent builds.
+# Leverage bind mounts to package.json and package-lock.json to avoid having to copy them
+# into this layer.
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci
+
+################################################################################
+# Create a stage for building the application.
+FROM deps as build
+
+# Download additional development dependencies before building, as some projects require
+# "devDependencies" to be installed to build. If you don't need this, remove this step.
+RUN --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci
+
+# Copy the rest of the source files into the image.
+COPY . .
+# Run the build script.
+RUN npm run build
+
+################################################################################
+# Create a new stage to run the application with minimal runtime dependencies
+# where the necessary files are copied from the build stage.
+FROM base as final
+
+# Use production node environment by default.
+ENV NODE_ENV production
+
+# Copy files as before
+COPY package.json .
+COPY --from=deps /usr/src/app/node_modules ./node_modules
+COPY --from=build /usr/src/app/dist ./dist
+COPY --from=build /usr/src/app/public ./public
+COPY --from=build /usr/src/app/src ./src
+COPY --from=build /usr/src/app/index.html ./index.html
+COPY --from=build /usr/src/app/vite.config.ts ./vite.config.ts
+COPY --from=build /usr/src/app/tsconfig.json ./tsconfig.json
+COPY --from=build /usr/src/app/tsconfig.node.json ./tsconfig.node.json
+COPY --from=build /usr/src/app/tsconfig.app.json ./tsconfig.app.json
+
+# Fix permissions so node user can write
+RUN chown -R node:node /usr/src/app
+
+USER node
+
+# Expose the port that the application listens on.
+EXPOSE 5173
+
+# Run the application.
+CMD ["npm", "run", "dev", "--", "--host"]
diff --git a/frontend/README.Docker.md b/frontend/README.Docker.md
new file mode 100644
index 0000000..8300f21
--- /dev/null
+++ b/frontend/README.Docker.md
@@ -0,0 +1,22 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:5173.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's Node.js guide](https://docs.docker.com/language/nodejs/)
\ No newline at end of file
diff --git a/frontend/compose.yaml b/frontend/compose.yaml
new file mode 100644
index 0000000..7a24993
--- /dev/null
+++ b/frontend/compose.yaml
@@ -0,0 +1,62 @@
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Docker Compose reference guide at
+# https://docs.docker.com/go/compose-spec-reference/
+
+# Here the instructions define your application as a service called "server".
+# This service is built from the Dockerfile in the current directory.
+# You can add other services your application may depend on here, such as a
+# database or a cache. For examples, see the Awesome Compose repository:
+# https://github.com/docker/awesome-compose
+name: frontend
+
+services:
+  server:
+    build:
+      context: .
+    ports:
+      - 5173:5173
+    volumes:
+      - ./src:/usr/src/app/src
+    develop:
+      watch:
+        - path: ./package.json
+          action: rebuild
+        - path: ./vite.config.ts
+          action: rebuild
+        - path: ./src
+          target: /usr/src/app/src
+          action: sync
+
+# The commented out section below is an example of how to define a PostgreSQL
+# database that your application can use. `depends_on` tells Docker Compose to
+# start the database before your application. The `db-data` volume persists the
+# database data between container restarts. The `db-password` secret is used
+# to set the database password. You must create `db/password.txt` and add
+# a password of your choosing to it before running `docker-compose up`.
+#     depends_on:
+#       db:
+#         condition: service_healthy
+#   db:
+#     image: postgres
+#     restart: always
+#     user: postgres
+#     secrets:
+#       - db-password
+#     volumes:
+#       - db-data:/var/lib/postgresql/data
+#     environment:
+#       - POSTGRES_DB=example
+#       - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
+#     expose:
+#       - 5432
+#     healthcheck:
+#       test: [ "CMD", "pg_isready" ]
+#       interval: 10s
+#       timeout: 5s
+#       retries: 5
+# volumes:
+#   db-data:
+# secrets:
+#   db-password:
+#     file: db/password.txt
+
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
new file mode 100644
index 0000000..48b90c1
--- /dev/null
+++ b/frontend/nginx.conf
@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://backend:5000/api;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+} 
\ No newline at end of file