Tweaks

docker-compose.yml

@@ -56,3 +56,13 @@ services:
         depends_on:
             - machines-app
             - products-app
+    frontend-app:
+        build:
+            context: ./frontend
+            dockerfile: Dockerfile
+        environment:
+            - REACT_APP_BACKEND_API_URL="http://localhost:10000"
+        ports:
+            - "8080:80"
+        depends_on:
+            - proxy

frontend/.dockerignore

@@ -0,0 +1,3 @@
+**/node_modules
+**/build
+

frontend/Dockerfile

@@ -0,0 +1,20 @@
+# stage 1: build node frontend
+FROM node:21 as node-builder
+
+WORKDIR /node-builder
+
+COPY ./package.json .
+COPY ./package-lock.json .
+COPY ./public ./public
+COPY ./src ./src
+
+RUN \
+    npm install && \
+    npm run build
+
+
+# stage 2: build final image
+FROM nginx:1.25-alpine
+
+COPY --from=node-builder /node-builder/build/. /usr/share/nginx/html
+RUN ls -alF /usr/share/nginx/html

frontend/Makefile

@@ -0,0 +1,36 @@
+CONTAINER_NAME=frontend-app
+IMAGE_NAME=komponiranje-frontend-app
+
+
+run:
+	@npm start
+
+
+.PHONY: build
+build:
+	@npm run build
+
+
+upgrade-packages:
+	@go get -u ./...
+
+
+docker-build: clean
+	@docker build \
+		--progress=plain \
+		--tag $(IMAGE_NAME) \
+		.
+
+
+docker-run:
+	@docker run \
+		--name $(CONTAINER_NAME) \
+		--publish 8080:80 \
+		--detach \
+		$(IMAGE_NAME)
+
+
+clean:
+	- @docker stop $(CONTAINER_NAME)
+	- @docker rm $(CONTAINER_NAME)
+	- @docker rmi $(IMAGE_NAME)

frontend/src/components/Products.js

@@ -6,7 +6,7 @@ import { ProductCard } from "./ProductCard";
 function Products({ machineName, products, onSelect }) {
     const productItems = products.map((product) => {
         return (
-            <Grid md={6} key={product.id}>
+            <Grid md={6} key={product.id} sx={{ display: "flex" }}>
                 <ProductCard product={product} />
             </Grid>
         );