fix: Dockerized Frontend for Development environment

.env.sample

@@ -17,9 +17,13 @@ EXTRA_CORS_ORIGINS=["http://localhost:3040"]
 
 # For Frontend
 SITE_NAME="DTM-Drone Tasking Manager"
-BASE_URL=http://localhost:${BACKEND_WEB_APP_PORT:-8000}/api
-API_URL_V1=http://localhost:${BACKEND_WEB_APP_PORT:-8000}/api
-STATIC_BASE_URL=${MINIO_HOST_URL:-http://localhost:9000}/${FRONTEND_BUCKET_NAME:-frontendstatic}/
 
-# use development for frontend as dev else live
+# BACKEND URL USE
+BASE_URL=http://localhost:8000/api
+API_URL_V1=http://localhost:8000/api
+
+# Pattern goes as <MINIO_HOST>:<MINIO_PORT>/<MINIO_BUCKET> or any object storage path
+STATIC_BASE_URL=http://localhost:9000/frontendstatic/
+
+# use development for frontend as dev else live ["development", "live"]
 DOCKER_TARGET=development

docker-compose.yml

@@ -22,8 +22,6 @@ services:
       context: .
       dockerfile: src/frontend/Dockerfile
       target: ${DOCKER_TARGET:-development}
-      args:
-        - STATIC_BASE_URL=${STATIC_BASE_URL:-http://localhost:9000/frontendstatic/}
     ports:
       - ${FRONTEND_WEB_APP_PORT:-3040}:3040
     depends_on:

src/frontend/Dockerfile

@@ -1,6 +1,5 @@
 # ARG for the base image
 ARG NODE_BASE=18.16.0-bullseye-slim
-ARG STATIC_BASE_URL http://localhost:9000/frontendstatic/
 
 # Base image with frontend code
 FROM node:${NODE_BASE} as base
@@ -11,13 +10,11 @@ COPY ./src/frontend /app
 
 # Run development environment
 FROM base as development
-RUN env | tee .env
-ENTRYPOINT ["/bin/sh", "-c" , "yarn && yarn start --host 0.0.0.0"]
+ENTRYPOINT ["/bin/sh", "-c", "env | tee .env ; yarn; yarn start --host 0.0.0.0;"]
 
 # Generate frontend build files
 FROM base as build
-ARG STATIC_BASE_URL
-ENV STATIC_BASE_URL ${STATIC_BASE_URL}
+COPY ../.env .env
 RUN yarn
 RUN yarn build
 

src/frontend/docker-entrypoint.sh

@@ -24,8 +24,8 @@ mcli anonymous set download minio/${FRONTEND_BUCKET_NAME} || echo "Failed settin
 
 mcli cp --recursive /tmp/dist/* minio/${FRONTEND_BUCKET_NAME}
 
-for container in $(docker ps -a -q --filter "label=com.docker.compose.service=backend"); do
-  docker cp /tmp/dist/index.html $container:/project/src/backend/templates/index.html
+for backend_container in $(docker ps -a -q --filter "label=com.docker.compose.service=backend"); do
+  docker cp /tmp/dist/index.html $backend_container:/project/src/backend/templates/index.html
 done
 
 echo "======================================================"