port 5000 on mac is taken

Author: johnsimons

src/docker-compose-base.yml

@@ -47,20 +47,20 @@ services:
     build:
       context: ./frontend  # Path to the folder containing Dockerfile
       dockerfile: Dockerfile
+      args:
+        BILLING_SIGNALR: localhost:5002
+        CLIENT_SIGNALR: localhost:5004
+        SALES_SIGNALR: localhost:5001
+        SHIPPING_SIGNALR: localhost:5003
     ports:
-      - "61335:80"
+      - 61335:80
     depends_on:
       - billing 
       - shipping
       - clientui
       - sales  
     volumes:
       - ./frontend:/app  # Optional for hot reloading
-    environment:
-      - BILLING_SIGNALR=billing:5002
-      - CLIENT_SIGNALR=clientui:5000
-      - SALES_SIGNALR=sales:5001
-      - SHIPPING_SIGNALR=shipping:5003
   billing:
     build:
       context: ./
@@ -73,6 +73,8 @@ services:
       - ORIGIN_URL=http://frontend:8080
       - TRANSPORT_TYPE
       - CONNECTION_STRING
+    depends_on:
+      - service-control 
   shipping:
     build:
       context: ./
@@ -85,6 +87,8 @@ services:
       - ORIGIN_URL=http://frontend:8080
       - TRANSPORT_TYPE
       - CONNECTION_STRING
+    depends_on:
+      - service-control 
   sales:
     build:
       context: ./
@@ -97,18 +101,22 @@ services:
       - ORIGIN_URL=http://frontend:8080
       - TRANSPORT_TYPE
       - CONNECTION_STRING
+    depends_on:
+      - service-control 
   clientui:
     build:
       context: ./
       dockerfile: ./ClientUI/Dockerfile
     container_name: clientui
     ports:
-      - "5000:80"
+      - "5004:80"
     environment:
       - LISTENING_PORT=80
       - ORIGIN_URL=http://frontend:8080
       - TRANSPORT_TYPE
       - CONNECTION_STRING
+    depends_on:
+      - service-control 
 
 volumes:
   sc-data:

src/frontend/Dockerfile

@@ -13,6 +13,16 @@ RUN npm install
 # Copy the rest of the application code
 COPY . .
 
+ARG BILLING_SIGNALR
+ARG CLIENT_SIGNALR
+ARG SALES_SIGNALR 
+ARG SHIPPING_SIGNALR
+
+ENV VITE_CLIENT_SIGNALR=$CLIENT_SIGNALR
+ENV VITE_BILLING_SIGNALR=$BILLING_SIGNALR
+ENV VITE_SALES_SIGNALR=$SALES_SIGNALR
+ENV VITE_SHIPPING_SIGNALR=$SHIPPING_SIGNALR
+
 # Build the application
 RUN npm run build
 

src/frontend/src/components/BillingEndpoint.vue

@@ -14,7 +14,7 @@ import { store } from "./shared";
 import MessageContainer from "./MessageContainer.vue";
 import { GA4 } from "../utils/analytics";
 
-const {connection, state} = useSignalR(`http://${import.meta.env.BILLING_SIGNALR ?? "localhost:5002"}/billingHub`);
+const {connection, state} = useSignalR(`http://${import.meta.env.VITE_BILLING_SIGNALR ?? "localhost:5002"}/billingHub`);
 
 const processedCount = ref(0);
 const erroredCount = ref(0);

src/frontend/src/components/ClientEndpoint.vue

@@ -7,7 +7,7 @@ import { store } from "./shared";
 import type { PlaceOrder, Message } from "./types";
 import MessageContainer from "./MessageContainer.vue";
 
-const { connection, state } = useSignalR(`http://${import.meta.env.CLIENT_SIGNALR ?? "localhost:5000"}/clientHub`);
+const { connection, state } = useSignalR(`http://${import.meta.env.VITE_CLIENT_SIGNALR ?? "localhost:5000"}/clientHub`);
 
 const orderCount = ref(0);
 const messages = ref<Message[]>([]);

src/frontend/src/components/SalesEndpoint.vue

@@ -14,7 +14,7 @@ import MessageContainer from "./MessageContainer.vue";
 import { store } from "./shared";
 import { GA4 } from "../utils/analytics";
 
-const { connection, state } = useSignalR(`http://${import.meta.env.SALES_SIGNALR ?? "localhost:5001"}/salesHub`);
+const { connection, state } = useSignalR(`http://${import.meta.env.VITE_SALES_SIGNALR ?? "localhost:5001"}/salesHub`);
 
 const processedCount = ref(0);
 const erroredCount = ref(0);

src/frontend/src/components/ShippingEndpoint.vue

@@ -14,7 +14,7 @@ import MessageContainer from "./MessageContainer.vue";
 import { store } from "./shared";
 import { GA4 } from "../utils/analytics";
 
-const { connection, state } = useSignalR(`http://${import.meta.env.SHIPPING_SIGNALR ?? "localhost:5003"}/shippingHub`);
+const { connection, state } = useSignalR(`http://${import.meta.env.VITE_SHIPPING_SIGNALR ?? "localhost:5003"}/shippingHub`);
 
 const processedOrderPlacedCount = ref(0);
 const processedOrderBilledCount = ref(0);

src/frontend/vite.config.ts

@@ -3,18 +3,10 @@ import plugin from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
-
-
   return {
     plugins: [plugin()],
     server: {
       port: process.env.PORT ? parseInt(process.env.PORT) : 61335,
-    },
-    define: {
-      BILLING_SIGNALR: process.env.BILLING_SIGNALR,
-      CLIENT_SIGNALR: process.env.CLIENT_SIGNALR,
-      SALES_SIGNALR: process.env.SALES_SIGNALR,
-      SHIPPING_SIGNALR: process.env.SHIPPING_SIGNALR,
     }
   }
 }