Ir para o conteúdo principal

Configuração

nota

Se há uma funcionalidade que você está planejando trabalhar, apenas nos informe no Discord para que possamos:

  1. Informar se é algo que aceitaríamos no Immich
  2. Fornecer orientações sobre como algo assim poderia ser idealmente implementado
  3. Garantir que ninguém já esteja trabalhando nessa questão/funcionalidade para evitar esforços duplicados

Obrigado por seu interesse em contribuir 😊

Ambiente​

Serviços​

Este ambiente inclui os serviços abaixo. Detalhes adicionais estão disponíveis no README de cada serviço.

  • Servidor - /server
  • Aplicativo web - /web
  • Aprendizado de máquina - /machine-learning
  • Redis
  • Banco de dados de desenvolvimento PostgreSQL com porta exposta 5432, permitindo o uso de qualquer cliente de banco de dados para acessá-lo

Todos os serviços estão empacotados para rodar com um único comando Docker Compose.

Aplicativos servidor e web​

  1. Clone o repositório do projeto.
  2. Execute cp docker/example.env docker/.env.
  3. Edite docker/.env para fornecer valores para a variável necessária UPLOAD_LOCATION.
  4. No diretório raiz, execute:
Iniciar servidor de desenvolvimento
make dev # Makefile requerido instalado no sistema.
  1. Acesse a instância de desenvolvimento no seu navegador em http://localhost:3000, ou conecte-se via aplicativo móvel.

Todos os serviços serão iniciados com hot-reloading ativado para um ciclo rápido de feedback.

Você pode acessar o aplicativo web em http://your-machine-ip:3000 ou http://localhost:3000 e acessar o servidor pelo aplicativo móvel em http://your-machine-ip:3000/api

Notas:

  • O contêiner de desenvolvimento "web" opera com uid 1000. Se esse uid não tiver permissões de leitura/escrita nos volumes montados, você pode encontrar erros
  • Em caso de configuração Docker sem root, será necessário usar root dentro do contêiner. Caso contrário, você encontrará erros relacionados a permissões de leitura/escrita. Veja os comentários em docker/docker-compose.dev.yml.

Conectar web a um backend remoto​

Se você deseja apenas desenvolver o front-end conectado a um backend remoto existente, siga estes passos:

  1. Compile o SDK Immich - cd open-api/typescript-sdk && npm i && npm run build && cd -
  2. Entre no diretório web - cd web/
  3. Instale as dependências web - npm i
  4. Inicie o servidor de desenvolvimento web
IMMICH_SERVER_URL=https://demo.immich.app/ npm run dev

Se você estiver usando PowerShell no Windows, pode ser necessário definir a variável de ambiente separadamente, assim:

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

@immich/ui​

Para ver alterações locais em @immich/ui no Immich, faça o seguinte:

  1. Instale @immich/ui como um diretório irmão de immich/, por exemplo /home/user/immich e /home/user/ui
  2. Compile o projeto @immich/ui via npm run build
  3. Descomente o volume correspondente no serviço web do arquivo docker/docker-compose.dev.yaml (../../ui:/usr/ui)
  4. Descomente o alias correspondente no arquivo web/vite.config.js ('@immich/ui': path.resolve(__dirname, '../../ui'))
  5. Descomente a declaração de importação no arquivo web/src/app.css @import '/usr/ui/dist/theme/default.css'; e comente @import '@immich/ui/theme/default.css';
  6. Inicie o stack via make dev
  7. Após fazer alterações em @immich/ui, reconstrua-o (npm run build)

Aplicativo móvel​

Configuração​

  1. Configure o conjunto de ferramentas Flutter usando o FVM.
  2. Execute flutter pub get para instalar as dependências.
  3. Execute make translation para gerar o arquivo de tradução.
  4. Execute fvm flutter run para iniciar o aplicativo.

Tradução​

Para adicionar um novo texto de tradução, insira o par chave-valor no arquivo i18n/en.json na raiz do projeto Immich. Em seguida, no diretório mobile/, execute

make translation

O aplicativo móvel solicita qual backend deseja conectar. Você pode utilizar o backend demo (https://demo.immich.app/) se não precisar alterar o código do servidor ou carregar fotos. Alternativamente, você pode executar o servidor conforme as instruções acima.

Configuração de IDE​

Extensões para lint / formatação​

Definir essas extensões na IDE proporciona uma melhor experiência de desenvolvimento, com formatação automática de código ao salvar e feedback instantâneo sobre problemas de lint.

Dart Code Metrics​

O aplicativo móvel utiliza DCM (Dart Code Metrics) para linting e cálculo de métricas. Por favor, consulte a página Getting Started para mais informações sobre como configurar o DCM.

Nota: Ativar a licença não é necessário.

VSCode​

Instale as extensões Flutter, DCM, Prettier, ESLint e Svelte. Estas extensões estão listadas no arquivo extensions.json dentro da pasta .vscode/ e devem aparecer como recomendações do workspace.

Aqui estão as configurações que usamos. Elas devem estar ativas como configurações do workspace (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"
}