ImmichFrame goes web 🎉

.dockerignore

@@ -0,0 +1,32 @@
+# Include any files or directories that you don't want to be copied to your
+# container here (e.g., local build artifacts, temporary files, etc.).
+#
+# For more help, visit the .dockerignore file reference guide at
+# https://docs.docker.com/go/build-context-dockerignore/
+
+**/.DS_Store
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/bin
+**/charts
+**/docker-compose*
+**/compose.y*ml
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md

ImmichFrame.WebApi/Program.cs

@@ -7,7 +7,7 @@
 
 // Add services to the container.
 
-var settingsPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Settings.json");
+var settingsPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Config", "Settings.json");
 
 var json = File.ReadAllText(settingsPath);
 JsonDocument doc;

README.Docker.md

@@ -0,0 +1,24 @@
+### Building and running your application
+
+When you're ready, start your application by running:
+`docker compose up --build`.
+
+Your application will be available at http://localhost:8080.
+
+### Deploying your application to the cloud
+
+First, build your image, e.g.: `docker build -t myapp .`.
+If your cloud uses a different CPU architecture than your development
+machine (e.g., you are on a Mac M1 and your cloud provider is amd64),
+you'll want to build the image for that platform, e.g.:
+`docker build --platform=linux/amd64 -t myapp .`.
+
+Then, push it to your registry, e.g. `docker push myregistry.com/myapp`.
+
+Consult Docker's [getting started](https://docs.docker.com/go/get-started-sharing/)
+docs for more detail on building and pushing.
+
+### References
+* [Docker's .NET guide](https://docs.docker.com/language/dotnet/)
+* The [dotnet-docker](https://github.com/dotnet/dotnet-docker/tree/main/samples)
+  repository has many relevant samples and docs.

docker/docker-compose.dev.yml

@@ -0,0 +1,19 @@
+services:
+  immichframe_api:
+    build:
+      context: ..
+      # target: final
+    ports:
+      - 8080:8080
+    volumes:
+      - ~/immichFrame_Config:/app/Config
+      # - PATH/TO/CONFIG:/app/Config
+  immichframe_web:
+    build:
+      context: ../immichFrame.Web
+      target: dev
+    ports:
+      - 5173:5173
+    volumes:
+      - ~/immichFrame_Config:/app/Config
+      # - PATH/TO/CONFIG:/app/Config

docker/docker-compose.yml

@@ -0,0 +1,17 @@
+services:
+  immichframe_api:
+    build:
+      context: ..
+      # target: final
+    ports:
+      - 8080:8080
+    volumes:
+      - PATH/TO/CONFIG:/app/Config
+  immichframe_web:
+    build:
+      context: ../immichFrame.Web
+      target: prod
+    ports:
+      - 3000:3000
+    volumes:
+      - PATH/TO/CONFIG:/app/Config

dockerfile

@@ -0,0 +1,60 @@
+# syntax=docker/dockerfile:1
+
+# Comments are provided throughout this file to help you get started.
+# If you need more help, visit the Dockerfile reference guide at
+# https://docs.docker.com/go/dockerfile-reference/
+
+# Want to help us make this template better? Share your feedback here: https://forms.gle/ybq9Krt8jtBL3iCk7
+
+################################################################################
+
+# Learn about building .NET container images:
+# https://github.com/dotnet/dotnet-docker/blob/main/samples/README.md
+
+# Create a stage for building the application.
+FROM --platform=$BUILDPLATFORM mcr.microsoft.com/dotnet/sdk:8.0-alpine AS build
+
+COPY . /source
+
+WORKDIR /source/ImmichFrame.WebApi
+
+# This is the architecture you’re building for, which is passed in by the builder.
+# Placing it here allows the previous steps to be cached across architectures.
+ARG TARGETARCH
+
+# Restore dependencies
+RUN --mount=type=cache,id=nuget,target=/root/.nuget/packages \
+    dotnet restore
+
+# Build the application.
+# Leverage a cache mount to /root/.nuget/packages so that subsequent builds don't have to re-download packages.
+# If TARGETARCH is "amd64", replace it with "x64" - "x64" is .NET's canonical name for this and "amd64" doesn't
+#   work in .NET 6.0.
+RUN --mount=type=cache,id=nuget,target=/root/.nuget/packages \
+    dotnet publish -a ${TARGETARCH/amd64/x64} --use-current-runtime --self-contained false -o /app
+
+# If you need to enable globalization and time zones:
+# https://github.com/dotnet/dotnet-docker/blob/main/samples/enable-globalization.md
+################################################################################
+# Create a new stage for running the application that contains the minimal
+# runtime dependencies for the application. This often uses a different base
+# image from the build stage where the necessary files are copied from the build
+# stage.
+#
+# The example below uses an aspnet alpine image as the foundation for running the app.
+# It will also use whatever happens to be the most recent version of that tag when you
+# build your Dockerfile. If reproducability is important, consider using a more specific
+# version (e.g., aspnet:7.0.10-alpine-3.18),
+# or SHA (e.g., mcr.microsoft.com/dotnet/aspnet@sha256:f3d99f54d504a21d38e4cc2f13ff47d67235efeeb85c109d3d1ff1808b38d034).
+FROM mcr.microsoft.com/dotnet/aspnet:8.0-alpine AS final
+WORKDIR /app
+
+# Copy everything needed to run the app from the "build" stage.
+COPY --from=build /app .
+
+# Switch to a non-privileged user (defined in the base image) that the app will run under.
+# See https://docs.docker.com/go/dockerfile-user-best-practices/
+# and https://github.com/dotnet/dotnet-docker/discussions/4764
+USER $APP_UID
+
+ENTRYPOINT ["dotnet", "ImmichFrame.WebApi.dll"]

immichFrame.Web/.dockerignore

@@ -0,0 +1,17 @@
+Dockerfile
+.dockerignore
+.git
+.gitignore
+.gitattributes
+README.md
+.npmrc
+.prettierrc
+.eslintrc.cjs
+.graphqlrc
+.editorconfig
+.svelte-kit
+.vscode
+node_modules
+build
+package
+**/.env

immichFrame.Web/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

immichFrame.Web/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

immichFrame.Web/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

immichFrame.Web/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

immichFrame.Web/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"cSpell.words": ["immich", "immichframe", "openapi"]
+}

immichFrame.Web/Makefile

@@ -0,0 +1,31 @@
+dev:
+	docker compose -f ../docker/docker-compose.dev.yml up --remove-orphans || make dev-down
+
+dev-down:
+	docker compose -f ../docker/docker-compose.dev.yml down --remove-orphans
+
+dev-update:
+	docker compose -f ../docker/docker-compose.dev.yml up --build -V --remove-orphans
+
+prod:
+	docker compose -f ../docker/docker-compose.prod.yml up --build -V --remove-orphans
+
+api:
+	oazapfts https://localhost:7018/swagger/v1/swagger.json src/lib/immichFrameApi.ts
+
+attach-server:
+	docker exec -it docker_immich-server_1 sh
+
+format-%:
+	npm --prefix $(subst sdk,open-api/typescript-sdk,$*) run | grep 'format:fix' >/dev/null \
+		&& npm --prefix $(subst sdk,open-api/typescript-sdk,$*) run format:fix || true
+lint-%:
+	npm --prefix $* run lint:fix
+
+clean:
+	find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
+	find . -name "dist" -type d -prune -exec rm -rf '{}' +
+	find . -name "build" -type d -prune -exec rm -rf '{}' +
+	find . -name "svelte-kit" -type d -prune -exec rm -rf '{}' +
+	docker compose -f ./docker/docker-compose.dev.yml rm -v -f || true
+	docker compose -f ./e2e/docker-compose.yml rm -v -f || true

immichFrame.Web/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

immichFrame.Web/dockerfile

@@ -0,0 +1,27 @@
+FROM node:iron-alpine3.18@sha256:53108f67824964a573ea435fed258f6cee4d88343e9859a99d356883e71b490c AS base
+
+USER node
+WORKDIR /app
+
+FROM base AS builder
+COPY --chown=node:node package*.json ./
+RUN npm ci
+COPY --chown=node:node . .
+
+FROM builder AS dev
+EXPOSE 5173
+ENTRYPOINT ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
+
+FROM builder AS prod
+RUN npm run build
+RUN npm prune --omit=dev
+
+FROM base
+ENV NODE_ENV=production
+WORKDIR /app
+COPY --from=prod /app/node_modules ./node_modules
+COPY --from=prod /app/build ./build
+
+COPY package.json package-lock.json ./
+EXPOSE 3000
+ENTRYPOINT ["node", "build"]

immichFrame.Web/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js';
+import ts from 'typescript-eslint';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];