🐛 bug: Nginx does not route correctly using the docker image

.dockerignore

@@ -1,9 +1,9 @@
+npm-debug.log
 node_modules
 dist
-.git
-npm-debug.log
 Dockerfile
+Dockerfile.dev
 .dockerignore
-.git
 .gitignore
-.env
+.env
+.env.example

.env.example

@@ -1 +1,27 @@
-VITE_SOARCA_URI=http://localhost:8080 # for vite each env var must start with VITE_ otherwise it won't be exposed to the client side
+# .env.example — example environment variables for SOARCA-GUI
+# Copy this file to `.env.development` for local dev or to `.env` for Docker Compose
+# Notes:
+#  - Vite exposes ONLY variables prefixed with `VITE_` to the client (import.meta.env).
+#  - Client-visible `VITE_` values are embedded at *build time* (rebuild to change).
+#  - Docker Compose reads the project `.env` for substitution and container envs.
+#  - We also follow a consumer based prefix convention for clarity, so variables used by nginx start with NGINX_, those used by the dev server start with VITE_ etc.
+
+########## Development (Vite) ##########
+# Used by `npm run dev` / Vite dev server. Client-facing variables MUST start with VITE_.
+# copy these lines into `.env.development` or `.env` (see Vite docs at https://vite.dev/guide/env-and-mode) and adjust as needed for local development
+VITE_BACKEND_URL=http://localhost:8080 # backend API URL used by the frontend (dev server proxy target)
+VITE_SERVER_PORT=5173 # dev server port
+
+########## Docker Compose (dev) ##########
+# Values used by `docker-compose.dev.yml`. Compose will substitute ${VAR} from the
+# project `.env` or the shell environment when you run `docker compose`.
+VITE_APP_VERSION=development
+VITE_BACKEND_URL=http://host.docker.internal:8080 # backend API URL used by the frontend inside the container (host.docker.internal points to the host machine)
+VITE_SERVER_PORT=5173 # dev server port inside the container
+DOCKER_HOST_PORT=5173 # port on the host machine mapped to the container's VITE_SERVER_PORT (for browser access)
+
+########## Production (nginx) ##########
+# Values used at container runtime by nginx to proxy /api/
+NGINX_BACKEND_URL=http://host.docker.internal:8080/  # backend API URL used by nginx inside the container (host.docker.internal points to the host machine)
+NGINX_SERVER_PORT=8081 # port nginx listens on inside the container
+DOCKER_HOST_PORT=8081 # port on the host machine mapped to the container's NGINX_SERVER_PORT (for browser access)

Dockerfile

@@ -1,19 +1,15 @@
-# Stage 1: Development environment
-FROM node:24-alpine AS development
+# Install dependencies and build the application
+FROM node:24-alpine AS builder
 RUN apk add --no-cache git
 WORKDIR /app
 COPY package*.json ./
-RUN npm install --include=dev
-EXPOSE 3000
-CMD ["npm", "run", "dev"]
-
-# Stage 2: Build for production
-FROM development AS builder
+RUN npm install
 COPY . .
 RUN npm run build
 
-# Stage 3: Production environment
+# Serve with nginx
 FROM nginx:alpine AS production
+COPY nginx.conf /etc/nginx/templates/default.conf.template
 COPY --from=builder /app/dist /usr/share/nginx/html
-EXPOSE 80
+EXPOSE 8081
 CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,9 @@
+# Install (dev) dependencies and run development server
+# NOTE: we install git to allow the versioning of the application to be included in the build (e.g., for display in the UI)
+FROM node:24-alpine
+RUN apk add --no-cache git
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --include=dev
+EXPOSE 5173
+CMD ["npm", "run", "dev"]