Fix docker-compose.yml and added BASE_HREF for angular

.env.example

@@ -1,3 +1,7 @@
 # ID for identifying containers created by docker-compose
 # This variable is valid for all projects (debug, hub, nginx, and "production")
 ID_PROJECT=mean
+
+# For angular, the base href is the path where the app is hosted, use / if the app is hosted in the root.
+# This is used to generate the index.html file with the correct base href and is only valid for production mode.
+BASE_HREF=/contacts/

api/server.js

@@ -85,9 +85,7 @@ app.use(
       { url: "/api/user/authenticate", methods: ["POST"] },
       { url: "/index.html", methods: ["GET"] },
       { url: /\.js$/, methods: ["GET"] },
-      { url: /\.css$/, methods: ["GET"] },
-      { url: /^\/api\/beneficiarios(.*)$/, methods: ["POST"] },
-      { url: "/", methods: ["GET"] }
+      { url: /\.css$/, methods: ["GET"] }
     ]
   })
 );

docker-compose.yml

@@ -6,9 +6,11 @@ services:
     build: # specify the directory of the Dockerfile
       context: .
       dockerfile: dockerfile
+      args:
+        BASE_HREF: ${BASE_HREF:-/}
     container_name: ${ID_PROJECT:-mean}_angular_express
     ports:
-      - "3000:3000" #specify ports forewarding
+      - "4200:3000" #specify ports forewarding
       # Below database enviornment variable for api is helpful when you have to use database as managed service
     environment:
       - SECRET=Thisismysecret

dockerfile

@@ -11,9 +11,14 @@ WORKDIR /app
 
 COPY /frontend .
 
+ARG BASE_HREF=/
+
 ## Build the angular app in production mode and store the artifacts in dist folder
 RUN npm run build:prod
 
+## Change base href in index.html
+RUN sh -c "find . -name \"index*.html\" -exec sed -i 's|<base href=\"/\">|<base href=\"${BASE_HREF}\">|' {} +"
+
 ### STAGE 2: Setup ###
 FROM node:20-alpine
 
@@ -26,7 +31,8 @@ COPY /api/ /app/
 RUN npm ci
 
 ## From ‘builder’ copy published angular bundles in app/public
-COPY --from=builder /app/dist /app/public
+COPY --from=builder /app/dist/contacts/browser /app/public
+
 ## expose port for express
 EXPOSE 3000
 

frontend/package.json

@@ -6,6 +6,7 @@
     "start": "ng serve",
     "serve": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
+    "build:prod": "ng build --configuration production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "serve:ssr:contacts": "node dist/contacts/server/server.mjs"
@@ -51,4 +52,4 @@
     "prettier-plugin-tailwindcss": "0.6.1",
     "typescript": "~5.4.2"
   }
-}
+}