glam/.opencode/MONOREPO_FRONTEND_APPS.md

Monorepo Frontend Applications

Last Updated: 2025-12-19
Status: MANDATORY reference for all frontend development and deployment

---

Overview

This project is a monorepo containing TWO separate frontend applications that serve different domains. AI agents MUST understand which app to modify based on the target domain.

---

Application Mapping

Domain	Local Directory	Server Path	Purpose
bronhouder.nl	/frontend/	/var/www/glam-frontend/	Main GLAM ontology frontend, schema visualization
archief.support	/apps/archief-assistent/	/var/www/archief-assistent/	Archive assistant app, institution map

---

Directory Structure

/Users/kempersc/apps/glam/
├── frontend/                         # bronhouder.nl
│   ├── src/
│   │   ├── pages/
│   │   │   ├── MapPage.tsx          # Map for bronhouder.nl (different from archief.support!)
│   │   │   └── ...
│   │   ├── App.tsx
│   │   └── ...
│   ├── package.json
│   ├── vite.config.ts
│   └── dist/                         # Build output → /var/www/glam-frontend/
│
├── apps/
│   └── archief-assistent/            # archief.support
│       ├── src/
│       │   ├── pages/
│       │   │   ├── MapPage.tsx      # Map for archief.support
│       │   │   └── ...
│       │   ├── App.tsx
│       │   └── ...
│       ├── package.json
│       ├── vite.config.ts
│       └── dist/                     # Build output → /var/www/archief-assistent/
│
└── infrastructure/
    └── deploy.sh                     # Deployment script (currently only handles /frontend/)

---

Deployment Commands

Archief Assistent (archief.support)

# Build
cd /Users/kempersc/apps/glam/apps/archief-assistent
npm run build

# Deploy
rsync -avz --delete dist/ root@91.98.224.44:/var/www/archief-assistent/

Main Frontend (bronhouder.nl)

# Build
cd /Users/kempersc/apps/glam/frontend
npm run build

# Deploy (use deploy script)
./infrastructure/deploy.sh --frontend

# Or manual rsync
rsync -avz --delete dist/ root@91.98.224.44:/var/www/glam-frontend/

---

Common Mistakes to Avoid

Mistake 1: Editing the Wrong MapPage

If user reports an issue with archief.support/map:

• WRONG: Edit /frontend/src/pages/MapPage.tsx
• CORRECT: Edit /apps/archief-assistent/src/pages/MapPage.tsx

Mistake 2: Deploying to Wrong Directory

If deploying changes for archief.support:

• WRONG: rsync dist/ root@91.98.224.44:/var/www/glam-frontend/
• CORRECT: rsync dist/ root@91.98.224.44:/var/www/archief-assistent/

Mistake 3: Using deploy.sh for Archief Assistent

The infrastructure/deploy.sh script currently only handles the main frontend. For archief-assistent, use manual rsync.

---

Caddy Configuration

The server uses Caddy as web server. Both apps are configured in /etc/caddy/Caddyfile:

# View Caddy config
ssh root@91.98.224.44 "cat /etc/caddy/Caddyfile"

# Reload Caddy after config changes
ssh root@91.98.224.44 "systemctl reload caddy"

---

Debug Logging

Current Debug Logs (to be removed)

Debug logs were added during map troubleshooting on 2025-12-19:

File: /apps/archief-assistent/src/pages/MapPage.tsx

console.log('[AA-MapPage] ...') // Remove these

File: /apps/archief-assistent/src/App.tsx

console.log('[AA-App] ...')        // Remove these
console.log('[AA-AppContent] ...') // Remove these

Removal Command

# Search for debug logs
grep -rn "\[AA-" apps/archief-assistent/src/

# Remove manually by editing the files

---

Known Harmless Warnings

These MapLibre GL warnings appear in console but do NOT affect functionality:

Warning	Cause	Action
Error in parsing value for 'user-select'. Declaration dropped.	MapLibre GL CSS parsing	Ignore - cosmetic
WebGL warning: texImage: Alpha-premult and y-flip are deprecated	WebGL deprecation notice	Ignore - still works

---

Troubleshooting

Map Not Displaying on archief.support

1. Check correct file: Ensure editing /apps/archief-assistent/src/pages/MapPage.tsx
2. Check CSS: Map container needs explicit dimensions or absolute positioning
3. Check console: Look for [AA-MapPage] logs (if debug enabled)
4. Check network: Verify tile requests to MapTiler

Solution for Map Container CSS

The map container MUST have explicit dimensions. Using height: 100% in a flex column layout results in height: 0.

Working CSS:

<Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1 }}>
  <Map ... />
</Box>

Broken CSS (height becomes 0):

<Box sx={{ width: '100%', height: '100%' }}>
  <Map ... />
</Box>

---

Version History

Date	Change
2025-12-19	Initial documentation after archief.support map fix