build: add bunkerweb config for mapper frontend

.github/workflows/build_and_deploy.yml

@@ -17,7 +17,7 @@ on:
 
 jobs:
   backend-test:
-    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@3.1.1
     with:
       image_name: ghcr.io/${{ github.repository }}/backend
       build_context: src/backend
@@ -30,20 +30,20 @@ jobs:
     secrets: inherit
 
   frontend-unit-test:
-    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@3.1.1
     with:
       working_dir: src/frontend
 
   backend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     needs: [backend-test]
     with:
       context: src/backend
       build_target: prod
       image_name: ghcr.io/${{ github.repository }}/backend
 
   frontend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     needs: [frontend-unit-test]
     with:
       context: src
@@ -153,7 +153,7 @@ jobs:
     needs:
       - smoke-test-backend
       - smoke-test-frontend
-    uses: hotosm/gh-workflows/.github/workflows/remote_deploy_compose.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/remote_deploy_compose.yml@3.1.1
     with:
       environment: ${{ github.ref_name }}
       docker_compose_file: "deploy/compose.${{ github.ref_name }}.yaml"

.github/workflows/build_ci_img.yml

@@ -16,7 +16,7 @@ on:
 
 jobs:
   backend-ci-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     with:
       context: src/backend
       build_target: ci

.github/workflows/build_odk_imgs.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   build-odkcentral:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     with:
       context: odkcentral/api
       image_tags: |
@@ -24,7 +24,7 @@ jobs:
       multi_arch: true
 
   build-odkcentral-ui:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     with:
       context: odkcentral/ui
       image_tags: |

.github/workflows/docs.yml

@@ -12,19 +12,19 @@ on:
 
 jobs:
   build_doxygen:
-    uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/doxygen_build.yml@3.1.1
     with:
       output_path: docs/apidocs
 
   build_openapi_json:
-    uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/openapi_build.yml@3.1.1
     with:
       image: ghcr.io/${{ github.repository }}/backend:ci-${{ github.ref_name }}
       example_env_file_path: ".env.example"
       output_path: docs/openapi.json
 
   publish_docs:
-    uses: hotosm/gh-workflows/.github/workflows/mkdocs_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/mkdocs_build.yml@3.1.1
     needs:
       - build_doxygen
       - build_openapi_json

.github/workflows/pr_test_backend.yml

@@ -14,7 +14,7 @@ on:
 
 jobs:
   pytest:
-    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@3.1.1
     with:
       image_name: ghcr.io/${{ github.repository }}/backend
       build_context: src/backend

.github/workflows/pr_test_frontend.yml

@@ -14,12 +14,12 @@ on:
 
 jobs:
   unit-tests:
-    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/test_pnpm.yml@3.1.1
     with:
       working_dir: src/frontend
 
   e2e-tests:
-    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/test_compose.yml@3.1.1
     with:
       playwright: true
       cache_image: false

.github/workflows/tag_build.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   backend-build:
-    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/image_build.yml@3.1.1
     with:
       context: src/backend
       build_target: prod

.github/workflows/wiki.yml

@@ -10,6 +10,6 @@ on:
 
 jobs:
   publish-docs-to-wiki:
-    uses: hotosm/gh-workflows/.github/workflows/wiki.yml@2.0.9
+    uses: hotosm/gh-workflows/.github/workflows/wiki.yml@3.1.1
     with:
       homepage_path: "wiki_redirect.md"

compose.yaml

@@ -84,9 +84,11 @@ services:
       # EMAIL_LETS_ENCRYPT:
       # USE_LETS_ENCRYPT_STAGING: yes
       # Reverse proxy configs
-      SERVER_NAME: fmtm.localhost api.fmtm.localhost s3.fmtm.localhost sync.fmtm.localhost odk.fmtm.localhost odkcentral
+      SERVER_NAME: fmtm.localhost mapper.fmtm.localhost api.fmtm.localhost s3.fmtm.localhost sync.fmtm.localhost odk.fmtm.localhost odkcentral
       fmtm.localhost_REVERSE_PROXY_HOST: http://ui:7051
       fmtm.localhost_MAX_CLIENT_SIZE: 1G
+      mapper.fmtm.localhost_REVERSE_PROXY_HOST: http://ui-mapper:7055
+      mapper.fmtm.localhost_MAX_CLIENT_SIZE: 1G
       api.fmtm.localhost_REVERSE_PROXY_HOST: http://api:8000
       api.fmtm.localhost_MAX_CLIENT_SIZE: 1G
       s3.fmtm.localhost_REVERSE_PROXY_HOST: http://s3:9000
@@ -127,7 +129,7 @@ services:
     restart: "no"
     entrypoint: timeout 120 ./entrypoint.sh
 
-  # This is needed by the bunkerweb scheduler to run unfortunately
+  # This is needed by the bunkerweb scheduler to identify which container to route to
   proxy-docker-sock:
     image: "docker.io/tecnativa/docker-socket-proxy:0.2.0"
     volumes:

docs/dev/Production.md

@@ -69,6 +69,8 @@ ${FMTM_DOMAIN} --> Frontend
 api.${FMTM_DOMAIN} --> Backend
 odk.${FMTM_DOMAIN} --> ODK Central
 s3.${FMTM_DOMAIN} --> S3 / Minio
+sync.${FMTM_DOMAIN} --> The DB Sync Service
+mapper.${FMTM_DOMAIN} --> The Mapper UI
 ```
 
 These defaults can be overridden with respective environment variables:

docs/manuals/mapping.md

@@ -55,7 +55,7 @@ for field mapping:
 ### Step 2: Access the Mapper Page
 
 - **Option 1:** Click on the project cards from your mobile device
-- **Option 3:** Go to `https://fmtm.hotosm.org/mapnow/<project_id>` to open
+- **Option 3:** Go to `https://mapper.fmtm.hotosm.org/<project_id>` to open
   the Mapper Page for a specific project.
 
 !!! note

docs/manuals/project-managers.md

@@ -264,7 +264,7 @@ server by selecting HOT as your organization.
    find it difficult to download by themselves.
 2. Share the link of the project for the mapper to reach  
    to the project easily. The URL be:
-   [https://fmtm.hotosm.org/mapnow/project_id](https://fmtm.hotosm.org/mapnow/project_id)
+   [https://mapper.fmtm.hotosm.org/project_id](https://mapper.fmtm.hotosm.org/project_id)
 3. **Updating Metadata**  
    If you need mappers to include their email  
    and phone number along with their username, guide them  

src/backend/app/config.py

@@ -188,9 +188,11 @@ def assemble_cors_origins(
                 else ""
             )
             default_origins.append(f"http://{domain}{local_server_port}")
+            default_origins.append(f"http://mapper.{domain}{local_server_port}")
         else:
-            # Add the main FMTM domain
+            # Add the main FMTM domains (UI + Mapper UI)
             default_origins.append(f"https://{domain}")
+            default_origins.append(f"https://mapper.{domain}")
 
         # Process `extra_origins` if provided
         if isinstance(extra_origins, str):

src/backend/app/projects/project_deps.py

@@ -38,10 +38,12 @@ async def get_project(
     return await get_project_by_id(db, project_id)
 
 
-async def get_project_by_id(db: Connection, project_id: int):
+async def get_project_by_id(db: Connection, project_id: int, minimal: bool = False):
     """Get a single project by it's ID."""
     try:
-        return await DbProject.one(db, project_id, warn_on_missing_token=False)
+        return await DbProject.one(
+            db, project_id, minimal=minimal, warn_on_missing_token=False
+        )
     except KeyError as e:
         raise HTTPException(status_code=HTTPStatus.NOT_FOUND, detail=str(e)) from e
 

src/backend/app/projects/project_routes.py

@@ -1293,7 +1293,7 @@ async def read_project_minimal(
     (any user could theoretically submit a contribution via the ODK
     token, even if this is a private project).
     """
-    return await DbProject.one(db, project_id, minimal=True)
+    return await project_deps.get_project_by_id(db, project_id, minimal=True)
 
 
 @router.get("/{project_id}/download")

src/frontend/src/components/home/ExploreProjectCard.tsx

@@ -17,8 +17,12 @@ export default function ExploreProjectCard({ data }: { data: projectType }) {
     dispatch(HomeActions.SetSelectedProject(project));
     const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     if (isMobile) {
-      window.location.href = `/mapnow/${data.id}`;
+      // Redirect to mapper frontend on mobile
+      // (we hardcode mapper.xxx for now - open an issue if more flexibility is needed)
+      const { protocol, hostname, port } = window.location;
+      window.location.href = `${protocol}//mapper.${hostname}${port ? `:${port}` : ''}/${data.id}`;
     } else {
+      // Else view project via manager frontend (desktop)
       navigate(`/project/${data.id}`);
     }
   };

src/frontend/src/views/OsmAuth.tsx

@@ -43,9 +43,10 @@ function OsmAuth() {
 
           if (requestedPath) {
             sessionStorage.removeItem('requestedPath');
-            if (requestedPath.includes('mapnow')) {
+            const { protocol, hostname, port } = window.location;
+            if (hostname.startsWith('mapper.')) {
               // redirect to mapper frontend (navigate doesn't work as it's on svelte)
-              window.location.href = `${window.location.origin}${requestedPath}`;
+              window.location.href = `${protocol}//mapper.${hostname}${port ? `:${port}` : ''}/${requestedPath}`;
             } else {
               // Call /auth/me to populate the user details in the header
               const apiUser = await getUserDetailsFromApi();

src/mapper/README.md

@@ -22,8 +22,8 @@ docker compose build ui-mapper
 docker compose up -d
 ```
 
-- The UI runs behind the same Nginx proxy, under the path:
+- The UI runs behind the same Nginx proxy, under the domain:
 
 ```html
-https://DOMAIN/mapnow/{projectId}
+https://mapper.fmtm.localhost:7050/{projectId}
 ```

src/mapper/src/routes/+error.svelte

@@ -0,0 +1 @@
+<h1>The URL must have a project ID</h1>

src/mapper/src/routes/+layout.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import '@hotosm/ui/dist/style.css';
 	import '@hotosm/ui/dist/hotosm-ui';
-	import { setBasePath } from '@hotosm/ui/dist/hotosm-ui';
 	import Toast from '$lib/components/toast.svelte';
 	import Header from '$lib/components/header.svelte';
-	setBasePath('/mapnow');
 
 	let { data, children } = $props();
 </script>

src/mapper/svelte.config.js

@@ -22,10 +22,6 @@ const config = {
 			precompress: false,
 			strict: true,
 		}),
-		// Works in conjunction with reverse proxy to serve under /mapnow prefix
-		paths: {
-			base: '/mapnow',
-		},
 	},
 
 	alias: {