设置

备注

如果你计划处理某个功能，请在 Discord 中通知我们，以便我们可以：

告知你该功能是否会被接受到 Immich 中
提供如何实现该功能的建议
确保没有人已经在处理该问题/功能，以避免重复工作

感谢你愿意贡献 😊

环境

服务

此环境包含以下服务。每个服务的更多详情请参见其 README 文件。

服务端 - /server
Web 应用 - /web
机器学习 - /machine-learning
Redis
带有暴露端口 5432 的 PostgreSQL 开发数据库，你可以使用任意数据库客户端访问它

所有服务都已打包，可以通过单个 Docker Compose 命令运行。

服务端和 Web 应用

克隆项目代码库。
运行 cp docker/example.env docker/.env。
编辑 docker/.env 文件，为必需的变量 UPLOAD_LOCATION 提供值。
从项目根目录运行：

启动开发服务
make dev # 系统需要预安装 Makefile。

在浏览器中访问开发实例：http://localhost:3000，或者通过移动应用连接。

所有服务会启动并启用热加载，以实现快速反馈循环。

你可以通过 http://your-machine-ip:3000 或 http://localhost:3000 访问 Web，并通过移动应用通过 http://your-machine-ip:3000/api 访问服务端。

注意事项：

"web" 开发容器以 uid 1000 运行。如果该 uid 对挂载的卷没有读写权限，可能会遇到错误。
如果使用无根 Docker 设置，则需要在容器中使用 root，否则会遇到与读写权限相关的错误，请参见 docker/docker-compose.dev.yml 文件中的注释。

将 Web 连接到远程后端

如果你只想进行 Web 开发并连接到一个已有的远程后端，请按照以下步骤操作：

构建 Immich SDK：cd open-api/typescript-sdk && npm i && npm run build && cd -
进入 Web 目录：cd web/
安装 Web 依赖：npm i
启动 Web 开发服务器

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

如果您在 Windows 上使用 PowerShell，可能需要单独设置环境变量，如下所示：

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

`@immich/ui`

要在 Immich 中查看对 @immich/ui 的本地更改，请按以下步骤操作：

将 @immich/ui 安装为 immich/ 的兄弟目录，例如 /home/user/immich 和 /home/user/ui
通过 npm run build 构建 @immich/ui 项目
取消注释 docker/docker-compose.dev.yaml 文件中 Web 服务的对应卷（../../ui:/usr/ui）
取消注释 web/vite.config.js 文件中的对应别名（'@immich/ui': path.resolve(__dirname, '../../ui')）
取消注释 web/src/app.css 文件中的导入语句 @import '/usr/ui/dist/theme/default.css'; 并注释掉 @import '@immich/ui/theme/default.css';
通过 make dev 启动堆栈
在 @immich/ui 中进行更改后，重新构建它（npm run build）

移动端应用

设置

使用 FVM 设置 Flutter 工具链。
运行 flutter pub get 安装依赖项。
运行 make translation 生成翻译文件。
运行 fvm flutter run 启动应用。

翻译

要添加新翻译文本，请将键值对输入到 Immich 项目根目录中的 i18n/en.json 文件中。随后，从 mobile/ 目录运行：

make translation

移动端应用会询问你连接哪个后端。如果你不需要更改服务端代码或上传照片，可以使用演示后端（https://demo.immich.app/）。或者，你可以按照上述指示自行运行服务端。

IDE 设置

Lint / 格式化扩展

在 IDE 中设置这些工具可以带来更好的开发体验，代码保存时自动格式化，并即时反馈 Lint 问题。

Dart Code Metrics

移动端应用使用 DCM（Dart Code Metrics）进行 Lint 检查和指标计算。请参考入门指南了解 DCM 的设置详情。

注意：不需要激活许可证。

VSCode

安装 Flutter，DCM，Prettier，ESLint 和 Svelte 扩展。这些扩展列在 .vscode 下的 extensions.json 文件中，应该会显示为工作区推荐项。

以下是我们使用的设置，它们应该作为工作区设置激活（settings.json）：

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"
}

环境​

服务​

服务端和 Web 应用​

将 Web 连接到远程后端​

@immich/ui​

移动端应用​

设置​

翻译​

IDE 设置​

Lint / 格式化扩展​

Dart Code Metrics​

VSCode​

环境

服务