Zum Hauptinhalt springen

Einrichtung

Notiz

Falls du planst, an einer Funktion zu arbeiten, gib uns bitte in Discord Bescheid, damit wir:

  1. Dir mitteilen können, ob wir diese Funktion in Immich akzeptieren würden
  2. Dir Leitlinien geben können, wie so eine Funktion idealerweise implementiert werden sollte
  3. Sicherstellen können, dass niemand bereits an diesem Feature/Thema arbeitet, um doppelte Bemühungen zu vermeiden

Danke, dass du Interesse an der Mitwirkung zeigst 😊

Umgebung​

Dienste​

Diese Umgebung beinhaltet die folgenden Dienste. Weitere Details sind im README jedes Dienstes verfügbar.

  • Server - /server
  • Web-App - /web
  • Maschinelles Lernen - /machine-learning
  • Redis
  • PostgreSQL Entwicklungsdatenbank mit exponiertem Port 5432, sodass du jeden Datenbank-Client dafür nutzen kannst

Alle Dienste sind so verpackt, dass sie mit einem einzigen Docker Compose-Befehl ausgeführt werden können.

Server und Web-Apps​

  1. Klone das Projekt-Repository.
  2. Führe cp docker/example.env docker/.env aus.
  3. Bearbeite docker/.env, um Werte für die erforderliche Variable UPLOAD_LOCATION zu liefern.
  4. Aus dem Hauptverzeichnis heraus, führe folgendes aus:
Entwicklungsserver starten
make dev # erforderliche Makefile muss im System installiert sein.
  1. Greife über deinen Browser unter http://localhost:3000 auf die Entwicklungsinstanz zu oder verbinde dich über die mobile App.

Alle Dienste starten mit aktiviertem Hot-Reloading für einen schnellen Feedback-Zyklus.

Du kannst auf die Web-App unter http://your-machine-ip:3000 oder http://localhost:3000 zugreifen und den Server über die mobile App unter http://your-machine-ip:3000/api erreichen.

Hinweise:

  • Der „web“-Entwicklungscontainer läuft mit UID 1000. Falls diese UID keine Lese-/Schreibberechtigungen für die eingebundenen Volumes hat, können Fehler auftreten
  • Falls du Docker ohne Root-Rechte verwendest, musst du innerhalb des Containers auf root umschalten, sonst treten Probleme mit Lese-/Schreibberechtigungen auf. Siehe Kommentare in docker/docker-compose.dev.yml.

Verbindung der Web-App mit einem entfernten Backend​

Falls du nur Web-Entwicklung betreiben möchtest und dich mit einem existierenden entfernten Backend verbinden willst, folge diesen Schritten:

  1. Baue das Immich SDK - cd open-api/typescript-sdk && npm i && npm run build && cd -
  2. Wechsel in das Web-Verzeichnis - cd web/
  3. Installiere die Abhängigkeiten der Web-App - npm i
  4. Starte den Entwicklungsserver für die Web-App
IMMICH_SERVER_URL=https://demo.immich.app/ npm run dev

Falls du PowerShell unter Windows verwendest, musst du die Umgebungsvariable separat setzen, z. B.:

$env:IMMICH_SERVER_URL = "https://demo.immich.app/"
npm run dev

@immich/ui​

Um lokale Änderungen an @immich/ui in Immich zu sehen, führe folgende Schritte durch:

  1. Installiere @immich/ui als Schwesterverzeichnis zu immich/, z. B. /home/user/immich und /home/user/ui
  2. Baue das @immich/ui-Projekt via npm run build
  3. Hebe die entsprechende Volume-Deklaration im docker/docker-compose.dev.yaml-Webservice kommentarlos hervor (../../ui:/usr/ui)
  4. Hebe die entsprechende Alias-Deklaration in der Datei web/vite.config.js kommentarlos hervor ('@immich/ui': path.resolve(__dirname, '../../ui'))
  5. Hebe die Import-Deklaration in web/src/app.css hervor: Kommentiere @import '/usr/ui/dist/theme/default.css'; aus und kommentiere @import '@immich/ui/theme/default.css'; aus
  6. Starte den Stack via make dev
  7. Baue es erneut auf (npm run build), nachdem du Änderungen an @immich/ui vorgenommen hast

Mobile App​

Einrichtung​

  1. Richte die Flutter Toolchain mit FVM ein.
  2. Führe flutter pub get aus, um die Abhängigkeiten zu installieren.
  3. Führe make translation aus, um die Übersetzungsdateien zu generieren.
  4. Führe fvm flutter run aus, um die App zu starten.

Übersetzung​

Um einen neuen Übersetzungstext hinzuzufügen, füge das Schlüssel-Wert-Paar in i18n/en.json im Root des Immich-Projekts ein. Dann, vom mobile/-Verzeichnis aus, führe

make translation

Die Mobile-App fordert dich auf, das Backend zu verbinden. Du kannst das Demo-Backend (https://demo.immich.app/) nutzen, falls du keine Änderungen am Servercode vornehmen oder Fotos hochladen musst. Alternativ kannst du das Backend gemäß der obigen Anweisungen selbst starten.

IDE Einrichtung​

Lint-/Format-Extensions​

Das Einstellen dieser Extensions in der IDE sorgt für eine bessere Entwicklererfahrung, automatisches Formatieren des Codes beim Speichern und sofortiges Feedback zu Lint-Problemen.

Dart Code Metrics​

Die Mobile-App nutzt DCM (Dart Code Metrics) für Linting und die Berechnung von Metriken. Bitte besuche die Seite Getting Started für weitere Informationen zur Einrichtung von DCM.

Hinweis: Die Aktivierung der Lizenz ist nicht erforderlich.

VSCode​

Installiere die Erweiterungen Flutter, DCM, Prettier, ESLint und Svelte. Diese Erweiterungen sind in der Datei extensions.json unter .vscode/ aufgelistet und sollten als Empfehlungen für den Arbeitsbereich erscheinen.

Hier sind die Einstellungen, die wir verwenden. Sie sollten als Arbeitsbereich-Einstellungen (settings.json) aktiv sein:

settings.json
{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[dart]": {
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.formatOnSave": true,
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },
  "[javascript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[svelte]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "svelte.svelte-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.codeActionsOnSave": {
      "source.organizeImports": "explicit",
      "source.removeUnusedImports": "explicit"
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.tabSize": 2
  },
  "cSpell.words": ["immich"],
  "editor.formatOnSave": true,
  "eslint.validate": ["javascript", "svelte"],
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "*.dart": "${capture}.g.dart,${capture}.gr.dart,${capture}.drift.dart",
    "*.ts": "${capture}.spec.ts,${capture}.mock.ts"
  },
  "svelte.enable-ts-plugin": true,
  "typescript.preferences.importModuleSpecifier": "non-relative"
}