matthias.lotz
a0d74f795a
Major Frontend Refactoring: - Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components - Support 4 display modes: group, moderation, preview, single-image - Add hidePreview prop to conditionally hide group preview images - Unified grid layout with responsive 3/2/1 column design - Remove 15+ legacy files and components - Delete UploadedImagePage, SocialMedia components, old upload components - Remove unused CSS files (GroupCard.css, Image.css/scss) - Clean up /upload/:image_url route from App.js - Fix image preview functionality in MultiUploadPage - Convert File objects to blob URLs with URL.createObjectURL() - Add proper memory cleanup with URL.revokeObjectURL() - Improve page navigation and layout - Fix GroupsOverviewPage to route to /groups/:groupId detail page - Adjust PublicGroupImagesPage spacing and layout - Fix ModerationGroupsPage duplicate stats section CSS Refactoring: - Rename GroupCard.css → ImageGallery.css with updated class names - Maintain backward compatibility with legacy class names - Fix grid stretching with fixed 3-column layout Development Environment: - Add docker-compose.override.yml for local development - Create Dockerfile.dev with hot-reload support - Add start-dev.sh and nginx.dev.conf - Update README.dev.md with development setup instructions Production Build: - Fix frontend/Dockerfile multi-stage build (as → AS) - Update prod.sh to explicitly use docker-compose.yml (ignore override) - Resolve node:18-alpine image corruption issue - Backend Dockerfile improvements for Node 14 compatibility Documentation: - Update TODO.md marking completed frontend tasks - Clean up docs/images directory - Update README.md with current project status All changes tested and verified in both development and production environments.
52 lines
1.6 KiB
Markdown
52 lines
1.6 KiB
Markdown
## Dev: Schnellstart
|
||
|
||
Kurz und knapp — so startest und nutzt du die lokale Dev‑Umgebung mit HMR (nginx als Proxy vor dem CRA dev server):
|
||
|
||
Voraussetzungen
|
||
- Docker & Docker Compose (Docker Compose Plugin)
|
||
|
||
Starten (Dev)
|
||
1. Build & Start (daemon):
|
||
```bash
|
||
docker compose up --build -d image-uploader-frontend
|
||
```
|
||
2. Logs verfolgen:
|
||
```bash
|
||
docker compose logs -f image-uploader-frontend
|
||
```
|
||
3. Browser öffnen: http://localhost:3000 (HMR aktiv)
|
||
|
||
Ändern & Testen
|
||
- Dateien editieren im `frontend/src/...` → HMR übernimmt Änderungen sofort.
|
||
- Wenn du nginx‑Konfiguration anpassen willst, editiere `frontend/conf/conf.d/default.conf` (Dev‑Variante wird beim Containerstart benutzt). Nach Änderung: nginx reload ohne Neustart:
|
||
```bash
|
||
docker compose exec image-uploader-frontend nginx -s reload
|
||
```
|
||
|
||
Probleme mit `node_modules`
|
||
- Wenn du ein host‑seitiges `frontend/node_modules` hast, lösche es (konsistenter ist der container‑verwaltete Volume):
|
||
```bash
|
||
rm -rf frontend/node_modules
|
||
```
|
||
Danach `docker compose up --build -d image-uploader-frontend` erneut ausführen.
|
||
|
||
Stoppen
|
||
```bash
|
||
docker compose down
|
||
```
|
||
|
||
Hinweis
|
||
- Diese Dev‑Konfiguration läuft lokal mit erweiterten Rechten (nur für Entwicklung). Produktions‑Images/Configs bleiben unverändert.
|
||
|
||
|
||
Build and start:
|
||
docker compose up --build -d image-uploader-frontend
|
||
|
||
Tail logs:
|
||
docker compose logs -f image-uploader-frontend
|
||
|
||
Reload nginx (after editing conf in container):
|
||
docker compose exec image-uploader-frontend nginx -s reload
|
||
|
||
docker compose exec image-uploader-frontend nginx -s reload
|
||
docker compose down |