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.9 KiB
YAML
52 lines
1.9 KiB
YAML
version: '3.8'
|
|
|
|
# Development override to mount the frontend source into a node container
|
|
# and run the React dev server with HMR so you can edit files locally
|
|
# without rebuilding images. This file is intended to be used together
|
|
# with the existing docker-compose.yml from the repository.
|
|
|
|
services:
|
|
image-uploader-frontend:
|
|
container_name: image-uploader-frontend-dev
|
|
# For dev convenience nginx needs to be able to bind to port 80 and write the pid file
|
|
# and we also adjust file permissions on bind-mounted node_modules; run as root in dev.
|
|
user: root
|
|
# Build and run a development image that contains both nginx and the
|
|
# React dev server. nginx will act as a reverse proxy to the dev server
|
|
# so the app behaves more like production while HMR still works.
|
|
build:
|
|
context: ./frontend
|
|
dockerfile: Dockerfile.dev
|
|
working_dir: /app
|
|
# Map host port 3000 to the nginx listener (container:80) so you can open
|
|
# http://localhost:3000 and see the nginx-served dev site.
|
|
ports:
|
|
- "3000:80"
|
|
volumes:
|
|
- ./frontend:/app:cached
|
|
# Keep container node_modules separate so host node_modules doesn't conflict
|
|
- node_modules:/app/node_modules
|
|
environment:
|
|
# Use the backend service name so the dev frontend (running in the same
|
|
# compose project) can reach the backend via the internal docker network.
|
|
- CHOKIDAR_USEPOLLING=true
|
|
- HOST=0.0.0.0
|
|
- API_URL=http://image-uploader-backend:5000
|
|
- CLIENT_URL=http://localhost:3000
|
|
networks:
|
|
- npm-nw
|
|
- image-uploader-internal
|
|
depends_on:
|
|
- image-uploader-backend
|
|
# The Dockerfile.dev provides a proper CMD that starts nginx and the
|
|
# react dev server; no ad-hoc command is required here.
|
|
|
|
networks:
|
|
npm-nw:
|
|
external: true
|
|
image-uploader-internal:
|
|
driver: bridge
|
|
|
|
volumes:
|
|
node_modules:
|
|
driver: local |