diff --git a/.github/ISSUES/upgrade-deps-react-node-20251028.md b/.github/ISSUES/upgrade-deps-react-node-20251028.md new file mode 100644 index 0000000..d779df3 --- /dev/null +++ b/.github/ISSUES/upgrade-deps-react-node-20251028.md @@ -0,0 +1,65 @@ +--- +title: "Upgrade: React & Node (upgrade/deps-react-node-20251028)" +labels: ["enhancement", "dependencies", "infra"] +assignees: [] +--- + +Kurzbeschreibung +----------------- + +Dieses Issue beschreibt Analyse, Risiken und einen initialen Plan für das Upgrade von Frontend- und Backend-Dependencies in diesem Repository. Der zugehörige Branch ist `upgrade/deps-react-node-20251028`. + +Motivation +---------- + +- Sicherheits- und Performance-Updates +- Kompatibilität mit aktuellen Toolchains (Node LTS, React 18+, aktuelle Build-Tools) + +Aktueller Status (Inventar) +--------------------------- + +- Frontend + - react: ^17.0.1 + - react-dom: ^17.0.1 + - react-scripts: 4.0.3 + - @material-ui/core: ^4.11.3 (MUI v4) + - react-router-dom: ^5.2.0 + +- Backend + - node runtime in Dockerfile: node:14 + - express: ^4.17.1 + - sqlite3: ^5.1.7 + +Kurz-Plan (high level) +---------------------- + +1. Sicherheits-Upgrade: Backend Dockerfile → node:18 (smoke-test) +2. Frontend: react/react-dom → 18.x, react-scripts → 5.x (build & tests) +3. Optional: react-router v5 → v6 (Routes/useNavigate) — separater PR +4. Optional/Medium-term: MUI v4 → v5 (großer Refactor, separat) + +Risiken +------- + +- MUI-Migration ist der aufwändigste Schritt: makeStyles/JSS -> sx/styled +- react-router v6 erfordert Änderungen an allen Routen/Navigation uses +- Native Node-Module (sqlite3) können Rebuilds in CI erfordern + +Erwartete Artefakte / Deliverables +--------------------------------- + +- PR(s) auf Branch `upgrade/deps-react-node-20251028` mit: + - `docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md` (detaillierter Plan) + - Änderungen für Node runtime bump (Dockerfile) + - Optional: subsequent PRs für React/MUI/Router + +Nächste Schritte +--------------- + +1. Test-Phase: Node 14 → 18 (backend Dockerfile) — Build & smoke-test im Container +2. PR mit Node-Bump + Aktualisierte TODO/Plan +3. React 18 Upgrade in separatem PR + +Anmerkung +-------- +Diese Datei ist eine Vorlage für Issue/PR-Beschreibung; nach dem Push auf Remote kann sie in GitHub/Gitea als Issue oder PR-Body verwendet werden. diff --git a/TODO.md b/TODO.md index 76a60c6..de67821 100644 --- a/TODO.md +++ b/TODO.md @@ -11,7 +11,12 @@ Diese Datei listet die noch offenen Arbeiten, die ich im Projekt verfolge. Ich p Alte struktur: Alle Datein in src/data Neue Struktur: Datenbank in src/data/db und bilder in src/data/images -### Update node.js im Frontend und Backend + +### Update Frameworks im Frontend und Backend +- [ ] Backend: Node.js und Express auf die neuesten stabilen Versionen aktualisieren +- [ ] Frontend: React und Material-UI auf die neuesten stabilen Versionen aktualisieren + - [ ] npm? + - [ ] node? ### Frontend diff --git a/docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md b/docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md new file mode 100644 index 0000000..27baf90 --- /dev/null +++ b/docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md @@ -0,0 +1,149 @@ +# Upgrade-Plan: React, Router, MUI, Node (upgrade/deps-react-node-20251028) + +Datum: 2025-10-28 +Branch: upgrade/deps-react-node-20251028 + +## Ziel + +Schrittweise und rückfallfähige Aktualisierung der Laufzeit und Frameworks: + +- Backend: Node 14 -> Node 18 (LTS) (Schnellwin) +- Frontend: React 17 -> React 18, react-scripts 4 -> 5 +- Optional (separat): react-router v5 -> v6 +- Optional (iterativ): MUI v4 -> v5 (größere Refactor-Phase) + +## Umfang + +- Änderungen an `backend/Dockerfile` für Node-Version +- Aktualisierung `frontend/package.json` (react/react-dom/react-scripts) +- CI / Produktions-Build-Pipeline (Dockerfile, prod.sh) Smoke-tests +- Code-Änderungen: Router-Hooks (useHistory → useNavigate), App.js (Switch → Routes), evtl. MUI-Imports + +## Schritte (detailliert) + +### Phase 0 — Vorbereitung (0.5–1h) + +- Erstelle Branch (bereits erstellt) +- Sicherstellen, dass Tests/Build aktuell grün sind +- Erstelle Backup-Branch oder Tag + +### Phase 1 — Node runtime bump (0.5–2h) [Schnellwin] + +Ziel: Backend in Node 18 betreiben + +Aktionen: + +1. Edit `backend/Dockerfile`: `FROM node:14` → `FROM node:18` (oder `node:18-slim`) +2. Locally: build & run container + +```bash +docker build -t image-uploader-backend-test ./backend +docker run --rm -p 5000:5000 image-uploader-backend-test +# oder: docker compose -f docker-compose.yml up --build backend +``` + +3. Smoke-test: API Endpoints, DB, uploads +4. Falls native build-errors (sqlite3), ergänze build-essentials in Dockerfile + +Akzeptanzkriterien: +- Backend container läuft unter Node 18 ohne runtime-exceptions + +### Phase 2 — React 18 & react-scripts 5 (4–12h) + +Ziel: Frontend auf React 18 bringen (nicht MUI noch nicht zwangsläufig) + +Aktionen: + +1. Update `frontend/package.json`: + - `react` & `react-dom` → `^18.2.0` + - `react-scripts` → `^5.0.1` + +2. Lokales Install & Build + +```bash +cd frontend +npm ci +npm run build +``` + +3. Fix build-errors (häufig): PostCSS, Webpack-Optionen, kleine API-Änderungen +4. Test dev-mode (`npm start`) und important pages (upload, moderation, slideshow) + +Akzeptanzkriterien: +- `npm run build` liefert statische Assets +- Dev server läuft, app funktioniert manuell + +### Phase 3 — Router v5 → v6 (2–6h) + +Ziel: Modernisierung der Router-API + +Aktionen: + +1. Replace `react-router-dom` version in package.json → `^6.x` +2. Code changes: + - `Switch` → `Routes` + `Route element={}` + - `useHistory()` → `useNavigate()` + - `withRouter` entfernen +3. Sorgfältige manuelle Tests der Navigation + +Akzeptanzkriterien: +- Navigation / Link-Verhalten wie zuvor, Unit/E2E tests grün + +### Phase 4 — MUI v4 → v5 (größerer Refactor) (2–5d) + +Ziel: Migration zu MUI v5 mit modernem Styling (sx/styled) + +Aktionen: + +1. Upgrade Packages: `@mui/material`, `@mui/icons-material` +2. Entweder: + - kurzfristig: `@mui/styles` (Kompatibilitäts-Paket) verwenden, um Zeit zu gewinnen; oder + - langfristig: ersetze `makeStyles`/JSS mit `sx` oder `styled` +3. Theme/Spacing Anpassungen, Icons-Import prüfen +4. UI-Tests und visueller Abgleich + +Akzeptanzkriterien: +- Komponenten rendern korrekt, Theme konsistent + +### Phase 5 — Tests & Production Build + +1. Full Docker production build: `./prod.sh` Option 4 +2. E2E / manuelle smoke tests: Upload, Moderation, Slideshow + +## Aufwandsschätzung (grobe Orientierung) + +- Phase 1 (Node bump): 0.5–2h +- Phase 2 (React 18): 4–12h +- Phase 3 (Router v6): 2–6h +- Phase 4 (MUI v5): 24–56h (je nach Umfang) +- Tests / CI / Docs: 4–8h + +Gesamtschätzung (conservative): 3–10 Arbeitstage (abhängig von MUI scope) + +## Hinweise für CI / Docker + +- Wenn sqlite3 native gebaut werden muss, Dockerfile benötigt `build-essential` und `python` für node-gyp (oder alternativ use prebuilt binaries). +- Node LTS images: `node:18` oder `node:20` (prüfen, ob alle libs kompatibel) + +## Beispiel Patches (starter) + +- Backend Dockerfile (quick): + +```diff +--- a/backend/Dockerfile ++++ b/backend/Dockerfile +@@ +- FROM node:14 ++ FROM node:18 +``` + +## Nächste Schritte (konkret für mich) + +1. Erstelle PR mit Phase 1 (Node bump) + docs + TODO-Update +2. Nach Freigabe: PR für Phase 2 (React18) + +--- + +Dateien in diesem PR/Branch: +- `.github/ISSUES/upgrade-deps-react-node-20251028.md` (Issue-Template) +- `docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md` (dieses Dokument)