feat: use SvelteKit served by nest.js

server/Dockerfile

@@ -53,6 +53,7 @@ COPY --from=prod /usr/src/app/node_modules ./node_modules
 COPY --from=prod /usr/src/app/dist ./dist
 COPY --from=prod /usr/src/app/bin ./bin
 COPY --from=web /usr/src/app/build /build/www
+COPY --from=web /usr/src/app/node_modules /build/node_modules
 COPY server/resources resources
 COPY server/package.json server/package-lock.json ./
 COPY server/start*.sh ./

server/src/workers/api.ts

@@ -2,8 +2,7 @@ import { NestFactory } from '@nestjs/core';
 import { NestExpressApplication } from '@nestjs/platform-express';
 import { json } from 'body-parser';
 import cookieParser from 'cookie-parser';
-import { existsSync } from 'node:fs';
-import sirv from 'sirv';
+import type { Handler, NextFunction, Request, Response } from 'express';
 import { ApiModule } from 'src/app.module';
 import { excludePaths, serverVersion } from 'src/constants';
 import { ImmichEnvironment } from 'src/enum';
@@ -42,24 +41,21 @@ async function bootstrap() {
   useSwagger(app, { write: isDev });
 
   app.setGlobalPrefix('api', { exclude: excludePaths });
-  if (existsSync(resourcePaths.web.root)) {
-    // copied from https://github.com/sveltejs/kit/blob/679b5989fe62e3964b9a73b712d7b41831aa1f07/packages/adapter-node/src/handler.js#L46
-    // provides serving of precompressed assets and caching of immutable assets
-    app.use(
-      sirv(resourcePaths.web.root, {
-        etag: true,
-        gzip: true,
-        brotli: true,
-        extensions: [],
-        setHeaders: (res, pathname) => {
-          if (pathname.startsWith(`/_app/immutable`) && res.statusCode === 200) {
-            res.setHeader('cache-control', 'public,max-age=31536000,immutable');
-          }
-        },
-      }),
-    );
+
+  const svelteHandler = `${resourcePaths.web.root}/handler.js`;
+  try {
+    const { handler } = (await import(svelteHandler)) as { handler: Handler };
+    app.use((req: Request, res: Response, next: NextFunction) => {
+      if (req.url.startsWith('/api') || excludePaths.some((path) => req.url.startsWith(path))) {
+        return next();
+      }
+      return handler(req, res, next);
+    });
+  } catch {
+    logger.log('Not serving SvelteKit.');
   }
-  app.use(app.get(ApiService).ssr(excludePaths));
+
+  // app.use(app.get(ApiService).ssr(excludePaths));
 
   const server = await (host ? app.listen(port, host) : app.listen(port));
   server.requestTimeout = 24 * 60 * 60 * 1000;

web/bin/immich-web

@@ -5,8 +5,8 @@ TYPESCRIPT_SDK=/usr/src/open-api/typescript-sdk
 npm --prefix "$TYPESCRIPT_SDK" install
 npm --prefix "$TYPESCRIPT_SDK" run build
 
-UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283/}"
-until wget --spider --quiet "${UPSTREAM}/api/server/config"; do
+UPSTREAM="${IMMICH_SERVER_URL:-http://immich-server:2283}"
+until wget --spider --quiet "${UPSTREAM}/api/server/ping"; do
     echo 'waiting for api server...'
     sleep 1
 done

web/package.json

@@ -58,9 +58,9 @@
     "@eslint/js": "^9.18.0",
     "@faker-js/faker": "^9.3.0",
     "@socket.io/component-emitter": "^3.1.0",
-    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/adapter-node": "^5.2.12",
     "@sveltejs/enhanced-img": "^0.4.4",
-    "@sveltejs/kit": "^2.15.2",
+    "@sveltejs/kit": "^2.20.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.6",
@@ -86,7 +86,7 @@
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.3.3",
     "rollup-plugin-visualizer": "^5.14.0",
-    "svelte": "^5.25.3",
+    "svelte": "^5.28.1",
     "svelte-check": "^4.1.5",
     "tailwindcss": "^3.4.17",
     "tslib": "^2.6.2",

web/src/lib/utils/tunables.ts

@@ -10,18 +10,30 @@ function getNumber(string: string | null, fallback: number) {
   }
   return Number.parseInt(string);
 }
+
+const getItem = (key: string) => {
+  if (!globalThis.localStorage) {
+    const error = new Error('test');
+    Error.stackTraceLimit = Infinity;
+    console.log('local storage is not available', error.stack);
+    return null;
+  }
+
+  return globalThis.localStorage.getItem(key);
+};
+
 export const TUNABLES = {
   LAYOUT: {
-    WASM: getBoolean(localStorage.getItem('LAYOUT.WASM'), false),
+    WASM: getBoolean(getItem('LAYOUT.WASM'), false),
   },
   TIMELINE: {
-    INTERSECTION_EXPAND_TOP: getNumber(localStorage.getItem('TIMELINE_INTERSECTION_EXPAND_TOP'), 500),
-    INTERSECTION_EXPAND_BOTTOM: getNumber(localStorage.getItem('TIMELINE_INTERSECTION_EXPAND_BOTTOM'), 500),
+    INTERSECTION_EXPAND_TOP: getNumber(getItem('TIMELINE_INTERSECTION_EXPAND_TOP'), 500),
+    INTERSECTION_EXPAND_BOTTOM: getNumber(getItem('TIMELINE_INTERSECTION_EXPAND_BOTTOM'), 500),
   },
   ASSET_GRID: {
-    NAVIGATE_ON_ASSET_IN_VIEW: getBoolean(localStorage.getItem('ASSET_GRID.NAVIGATE_ON_ASSET_IN_VIEW'), false),
+    NAVIGATE_ON_ASSET_IN_VIEW: getBoolean(getItem('ASSET_GRID.NAVIGATE_ON_ASSET_IN_VIEW'), false),
   },
   IMAGE_THUMBNAIL: {
-    THUMBHASH_FADE_DURATION: getNumber(localStorage.getItem('THUMBHASH_FADE_DURATION'), 150),
+    THUMBHASH_FADE_DURATION: getNumber(getItem('THUMBHASH_FADE_DURATION'), 150),
   },
 };