193 lines
5.1 KiB
Markdown
193 lines
5.1 KiB
Markdown
# 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)
|
|
|
|
```bash
|
|
# 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)
|
|
|
|
```bash
|
|
# 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`:
|
|
|
|
```bash
|
|
# 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`
|
|
```javascript
|
|
console.log('[AA-MapPage] ...') // Remove these
|
|
```
|
|
|
|
**File**: `/apps/archief-assistent/src/App.tsx`
|
|
```javascript
|
|
console.log('[AA-App] ...') // Remove these
|
|
console.log('[AA-AppContent] ...') // Remove these
|
|
```
|
|
|
|
### Removal Command
|
|
|
|
```bash
|
|
# 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**:
|
|
```jsx
|
|
<Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 1 }}>
|
|
<Map ... />
|
|
</Box>
|
|
```
|
|
|
|
**Broken CSS** (height becomes 0):
|
|
```jsx
|
|
<Box sx={{ width: '100%', height: '100%' }}>
|
|
<Map ... />
|
|
</Box>
|
|
```
|
|
|
|
---
|
|
|
|
## Version History
|
|
|
|
| Date | Change |
|
|
|------|--------|
|
|
| 2025-12-19 | Initial documentation after archief.support map fix |
|