Backend and model uri are now passed in Dockerfile since the frontend is build within the docker container and served using serve. May add commands to clean up folders later.

Frontend/.dockerignore

@@ -0,0 +1,6 @@
+dist/
+Dockerfile
+node_modules/
+package-lock.json
+README.md
+vercel.json

Frontend/Dockerfile

@@ -1,6 +1,10 @@
 # Base image
 FROM node:22
 
+# Environment variables
+ENV MODEL_URI=<set_model_uri_here>
+ENV BACKEND_URI=<set_backend_uri_here>
+
 # Metadata
 LABEL maintainer="kshitijka"
 LABEL version=1.1.0
@@ -8,8 +12,7 @@ LABEL description="Crop Compass is a centralized management dashboard designed f
 
 # Update and upgrade
 RUN apt update && apt upgrade -y && \
-    apt clean all && \
-    rm -rf /var/lib/apt/lists/*
+    apt clean all && rm -rf /var/lib/apt/lists/*
 
 # Create non-root user
 RUN useradd -s /bin/bash nonroot
@@ -18,7 +21,12 @@ RUN useradd -s /bin/bash nonroot
 RUN mkdir -p /app
 RUN chown -R nonroot:nonroot /app
 WORKDIR /app
-COPY dist/ .
+COPY . .
+RUN echo $BACKEND_URI > /app/.env
+
+# Building frontend
+RUN npm install
+RUN npm run build
 
 # Install server
 RUN npm install -g serve
@@ -30,4 +38,4 @@ USER nonroot
 EXPOSE 3000
 
 # Run frontend
-CMD ["serve", "-s", "/app"]
+CMD ["serve", "-s", "/app/dist"]

Frontend/src/pages/UserPanel/Ai.jsx

@@ -24,7 +24,7 @@ const Ai = () => {
       const formData = new FormData();
       formData.append("image", selectedFile);
 
-      const response = await fetch("http://model:8081/predict", {
+      const response = await fetch("${MODEL_URI}/predict", {
         method: "POST",
         body: formData,
       });