hobbyhimmel/Project-Image-Uploader
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fe65544893
Project-Image-Uploader/CHANGELOG.md

5.1 KiB
Raw Blame History

Changelog

[Unreleased] - Branch: upgrade/deps-react-node-20251028

🎯 Major Framework Upgrades (October 2025)

Backend

  • ✅ Node.js: Upgraded from Node 14 → Node 24
    • Updated backend/Dockerfile to use node:24 base image
    • Verified sqlite3 compatibility and DB initialization
    • Backend server runs successfully on port 5000

Frontend

  • ✅ React: Upgraded from React 17 → React 18.3.1

    • Updated react and react-dom to ^18.3.1
    • Migrated root rendering API from ReactDOM.render() to createRoot() in src/index.js
    • Updated react-scripts to 5.0.1

  • ✅ React Router: Migrated from v5 → v6.28.0 (installed v6.30.1 in dev)

    • Replaced <Switch> with <Routes>
    • Updated route definitions to use element prop instead of component
    • Migrated navigation hooks: useHistory() → useNavigate()
    • Updated all <Route> paths and nested routing logic

  • ✅ Material-UI (MUI): Migrated from v4 → v5.14.0

    • Installed @mui/material, @mui/icons-material, @emotion/react, @emotion/styled
    • Migrated component imports from @material-ui/* to @mui/*
    • Removed @mui/styles after completing component migration
    • Converted styling from makeStyles to sx prop for components:
      • UploadProgress.js
      • DescriptionInput.js
      • MultiImageDropzone.js
      • MultiUploadPage.js
      • SlideshowPage.js
      • GroupsOverviewPage.js
      • Other components using MUI v5 styled/sx patterns

Dependencies & Cleanup

  • ✅ Lottie Animation: Replaced react-lottie with lottie-react (v2.4.0)

    • Removed peer dependency conflict with older React versions
    • Updated Loading.js component to use new API

  • ✅ Removed --legacy-peer-deps from frontend/Dockerfile

    • Clean dependency resolution without legacy flag
    • All packages now have compatible peer dependencies

  • ✅ ESLint Fixes: Cleaned up lint warnings across migrated files

    • Removed unused imports and handlers
    • Production build compiles successfully without warnings

Development Environment

  • ✅ Dev Overlay: Created docker-compose.override.yml and frontend/Dockerfile.dev

    • Development setup with live reload (HMR) for frontend
    • CRA dev server proxied through nginx on port 3000
    • Backend runs with nodemon for auto-reload
    • Bind mounts for source code (./frontend and ./backend)
    • Separate node_modules volumes to avoid host/container conflicts

  • ✅ Dev Container: Fixed compilation issues

    • Node 18.20.8 in frontend-dev container
    • react-router-dom@6.30.1 installed correctly
    • CRA dev server compiles successfully

Maintenance

  • ✅ Browserslist DB: Updated to version 1.0.30001751

    • Resolved "caniuse-lite is outdated" warning

  • ✅ PostCSS Deprecation Warning: Documented as known/harmless

    • Warning originates from react-scripts 5.0.1 transitive dependencies (postcss@8.5.6)
    • No action required - will be resolved in future react-scripts updates

📝 Documentation

  • Created docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md with phase-by-phase plan
  • Created .github/ISSUES/upgrade-deps-react-node-20251028.md (issue/PR template)
  • This CHANGELOG documents all completed work

🔧 Configuration Changes

  • backend/Dockerfile: Node 14 → Node 24
  • frontend/Dockerfile: Removed --legacy-peer-deps, uses clean npm install
  • frontend/Dockerfile.dev: New dev image with Node 18, nginx + CRA dev server
  • docker-compose.override.yml: Dev environment configuration
  • frontend/package.json: Updated all major framework versions
  • frontend/src/index.js: React 18 createRoot API
  • Multiple component files: MUI v5 migration (sx/styled)

⚠️ Known Issues / Notes

  • PostCSS deprecation warning from react-scripts 5.0.1 is harmless (no fix available)
  • Git push to remote blocked by SSH permission (local commits ready)

🚀 Next Steps (Pending)

  • Integration smoke tests (upload, download, slideshow)
  • Push branch to remote and open PR
  • Security audit (npm audit, CVE validation)
  • Verify production builds in CI
  • Merge PR after QA approval

Development Commands

Production Build & Run

# Build and run production containers
docker compose -f docker-compose.yml up --build -d

# Or use prod.sh script
./prod.sh

Development Mode (with live reload)

# Start dev environment with HMR
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d

# Frontend available at: http://localhost:3000
# Backend available at: http://localhost:5000

# Tail logs
docker logs -f image-uploader-frontend-dev
docker logs -f image-uploader-backend-dev

# Stop dev environment
docker compose -f docker-compose.yml -f docker-compose.override.yml down

Update Dependencies

# Update browserslist database
docker exec image-uploader-frontend-dev npx update-browserslist-db@latest

# Install new packages (in dev container)
docker exec image-uploader-frontend-dev npm install <package-name>

# Rebuild containers after package.json changes
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d