Remove VITE_SERVER_ENDPOINT dependency (#428)

* Move backend api to its own instance

* Remove external fetch hook

* Added endpoint for album

* Added endpoint for admin page

* Make request directly to immich-server

* Refactor unsued code

docker/.env.example

@@ -56,21 +56,6 @@ ENABLE_MAPBOX=false
 MAPBOX_KEY=
 
 
-
-
-###################################################################################
-# WEB - Required
-###################################################################################
-
-# This is the URL of your vm/server where you host Immich, so that the web frontend
-# know where can it make the request to.
-# For example: If your server IP address is 10.1.11.50, the environment variable will
-# be VITE_SERVER_ENDPOINT=http://10.1.11.50:2283/api
-# !CAUTION! THERE IS NO FORWARD SLASH AT THE END
-
-VITE_SERVER_ENDPOINT=
-
-
 ####################################################################################
 # WEB - Optional
 ####################################################################################

server/apps/immich/src/config/app.config.ts

@@ -16,6 +16,5 @@ export const immichAppConfig: ConfigModuleOptions = {
       then: Joi.string().optional().allow(null, ''),
       otherwise: Joi.string().required(),
     }),
-    VITE_SERVER_ENDPOINT: Joi.string().required(),
   }),
 };

server/entrypoint.sh

@@ -1 +0,0 @@
-npm start immich

web/src/api/api.ts

@@ -16,7 +16,7 @@ class ImmichApi {
 	public authenticationApi: AuthenticationApi;
 	public deviceInfoApi: DeviceInfoApi;
 	public serverInfoApi: ServerInfoApi;
-	private config = new Configuration({ basePath: serverEndpoint });
+	private config = new Configuration({ basePath: '/api' });
 
 	constructor() {
 		this.userApi = new UserApi(this.config);
@@ -34,6 +34,12 @@ class ImmichApi {
 	public removeAccessToken() {
 		this.config.accessToken = undefined;
 	}
+
+	public setBaseUrl(baseUrl: string) {
+		this.config.basePath = baseUrl;
+	}
 }
 
 export const api = new ImmichApi();
+export const serverApi = new ImmichApi();
+serverApi.setBaseUrl('http://immich-server:3001');

web/src/hooks.ts

@@ -1,6 +1,6 @@
 import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit';
 import * as cookie from 'cookie';
-import { api } from '@api';
+import { api, serverApi } from '@api';
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const cookies = cookie.parse(event.request.headers.get('cookie') || '');
@@ -11,8 +11,8 @@ export const handle: Handle = async ({ event, resolve }) => {
 	const accessToken = cookies['immich_access_token'];
 
 	try {
-		api.setAccessToken(accessToken);
-		const { data } = await api.userApi.getMyUserInfo();
+		serverApi.setAccessToken(accessToken);
+		const { data } = await serverApi.userApi.getMyUserInfo();
 		event.locals.user = data;
 
 		return await resolve(event);

web/src/lib/components/album-page/album-viewer.svelte

@@ -60,7 +60,7 @@
 	});
 
 	$: {
-		if (album.assets.length < 6) {
+		if (album.assets?.length < 6) {
 			thumbnailSize = Math.floor(viewWidth / album.assets.length - album.assets.length);
 		} else {
 			thumbnailSize = Math.floor(viewWidth / 6 - 6);

web/src/lib/components/shared-components/status-box.svelte

@@ -82,11 +82,6 @@
 		<div class="text-xs">
 			<p class="text-sm font-medium text-immich-primary">Server</p>
 
-			<input
-				class="border p-2 rounded-md bg-gray-200 mt-2 text-immich-primary font-medium"
-				value={endpoint}
-				disabled={true}
-			/>
 			<div class="flex justify-items-center justify-between mt-2">
 				<p>Status</p>
 

web/src/lib/stores/assets.ts

@@ -29,3 +29,7 @@ export const getAssetsInfo = async () => {
 		console.log('Error [getAssetsInfo]');
 	}
 };
+
+export const setAssetInfo = (data: AssetResponseDto[]) => {
+	assets.set(data);
+};

web/src/lib/utils/file-uploader.ts

@@ -168,7 +168,7 @@ async function fileUploader(asset: File, uploadType: UploadType) {
 			uploadAssetsStore.updateProgress(deviceAssetId, percentComplete);
 		};
 
-		request.open('POST', `${serverEndpoint}/asset/upload`);
+		request.open('POST', `api/asset/upload`);
 
 		request.send(formData);
 	} catch (e) {

web/src/routes/admin/index.svelte

@@ -2,10 +2,12 @@
 	import type { Load } from '@sveltejs/kit';
 	import { api, UserResponseDto } from '@api';
 
-	export const load: Load = async () => {
+	export const load: Load = async ({ fetch }) => {
 		try {
-			const { data: allUsers } = await api.userApi.getAllUsers(false);
-			const { data: user } = await api.userApi.getMyUserInfo();
+			const [user, allUsers] = await Promise.all([
+				fetch('/data/user/get-my-user-info').then((r) => r.json()),
+				fetch('/data/user/get-all-users?isAll=false').then((r) => r.json())
+			]);
 
 			return {
 				status: 200,

web/src/routes/albums/[albumId]/index.svelte

@@ -2,13 +2,15 @@
 	export const prerender = false;
 
 	import type { Load } from '@sveltejs/kit';
-	import { AlbumResponseDto, api } from '@api';
+	import { AlbumResponseDto } from '@api';
 
-	export const load: Load = async ({ params }) => {
+	export const load: Load = async ({ fetch, params }) => {
 		try {
 			const albumId = params['albumId'];
 
-			const { data: albumInfo } = await api.albumApi.getAlbumInfo(albumId);
+			const albumInfo = await fetch(`/data/album/get-album-info?albumId=${albumId}`).then((r) =>
+				r.json()
+			);
 
 			return {
 				status: 200,

web/src/routes/albums/[albumId]/photos/[assetId].svelte

@@ -1,12 +1,10 @@
 <script context="module" lang="ts">
 	export const prerender = false;
-
-	import { api } from '@api';
 	import type { Load } from '@sveltejs/kit';
 
 	export const load: Load = async ({ params }) => {
 		try {
-			await api.userApi.getMyUserInfo();
+			await fetch('/data/user/get-my-user-info');
 		} catch (e) {
 			return {
 				status: 302,

web/src/routes/albums/index.svelte

@@ -9,10 +9,12 @@
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';
 
-	export const load: Load = async () => {
+	export const load: Load = async ({ fetch }) => {
 		try {
-			const { data: user } = await api.userApi.getMyUserInfo();
-			const { data: albums } = await api.albumApi.getAllAlbums();
+			const [user, albums] = await Promise.all([
+				fetch('/data/user/get-my-user-info').then((r) => r.json()),
+				fetch('/data/album/get-all-albums').then((r) => r.json())
+			]);
 
 			return {
 				status: 200,

web/src/routes/data/README.md

@@ -0,0 +1 @@
+This directory contain SSR endpoints to user serverApi instance to make request directly to DNS

web/src/routes/data/album/get-album-info.ts

@@ -0,0 +1,18 @@
+import { AlbumResponseDto, serverApi } from '@api';
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit';
+
+export const GET = async ({
+	url
+}: RequestEvent): Promise<RequestHandlerOutput<AlbumResponseDto>> => {
+	try {
+		const albumId = url.searchParams.get('albumId') || '';
+		const { data } = await serverApi.albumApi.getAlbumInfo(albumId);
+		return {
+			body: data
+		};
+	} catch {
+		return {
+			status: 500
+		};
+	}
+};

web/src/routes/data/album/get-all-albums.ts

@@ -0,0 +1,18 @@
+import { AlbumResponseDto, serverApi } from '@api';
+import type { RequestEvent, RequestHandler, RequestHandlerOutput } from '@sveltejs/kit';
+
+export const GET = async ({
+	url
+}: RequestEvent): Promise<RequestHandlerOutput<AlbumResponseDto[]>> => {
+	try {
+		const isShared = url.searchParams.get('isShared') === 'true' || undefined;
+		const { data } = await serverApi.albumApi.getAllAlbums(isShared);
+		return {
+			body: data
+		};
+	} catch {
+		return {
+			status: 500
+		};
+	}
+};

web/src/routes/data/asset/get-all-assets.ts

@@ -0,0 +1,15 @@
+import { AssetResponseDto, serverApi } from '@api';
+import type { RequestHandlerOutput } from '@sveltejs/kit';
+
+export const GET = async (): Promise<RequestHandlerOutput<AssetResponseDto[]>> => {
+	try {
+		const { data } = await serverApi.assetApi.getAllAssets();
+		return {
+			body: data
+		};
+	} catch {
+		return {
+			status: 500
+		};
+	}
+};

web/src/routes/data/user/get-all-users.ts

@@ -0,0 +1,17 @@
+import { serverApi, UserResponseDto } from '@api';
+import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit';
+
+export const GET = async ({url} : RequestEvent): Promise<RequestHandlerOutput<UserResponseDto[]>> => {
+	try {
+    const isAll = url.searchParams.get('isAll') === 'true';
+
+		const { data } = await serverApi.userApi.getAllUsers(isAll);
+		return {
+			body: data
+		};
+	} catch {
+		return {
+			status: 500
+		};
+	}
+};

web/src/routes/data/user/get-my-user-info.ts

@@ -0,0 +1,15 @@
+import { serverApi, UserResponseDto } from '@api';
+import type { RequestHandlerOutput } from '@sveltejs/kit';
+
+export const GET = async (): Promise<RequestHandlerOutput<UserResponseDto>> => {
+	try {
+		const { data } = await serverApi.userApi.getMyUserInfo();
+		return {
+			body: data
+		};
+	} catch {
+		return {
+			status: 500
+		};
+	}
+};

web/src/routes/index.svelte

@@ -4,28 +4,31 @@
 	import { api } from '@api';
 
 	export const load: Load = async () => {
-		try {
-			const { data: user } = await api.userApi.getMyUserInfo();
+		if (browser) {
+			try {
+				const { data: user } = await api.userApi.getMyUserInfo();
+
+				return {
+					status: 302,
+					redirect: '/photos'
+				};
+			} catch (e) {}
+
+			const { data } = await api.userApi.getUserCount();
 
 			return {
-				status: 302,
-				redirect: '/photos'
+				status: 200,
+				props: {
+					isAdminUserExist: data.userCount == 0 ? false : true
+				}
 			};
-		} catch (e) {}
-
-		const { data } = await api.userApi.getUserCount();
-
-		return {
-			status: 200,
-			props: {
-				isAdminUserExist: data.userCount == 0 ? false : true
-			}
-		};
+		}
 	};
 </script>
 
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { browser } from '$app/env';
 
 	export let isAdminUserExist: boolean;
 

web/src/routes/photos/[assetId].svelte

@@ -1,12 +1,12 @@
 <script context="module" lang="ts">
 	export const prerender = false;
 
-	import { api } from '@api';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async () => {
+	export const load: Load = async ({ fetch }) => {
 		try {
-			await api.userApi.getMyUserInfo();
+			await fetch('/data/user/get-my-user-info');
+
 			return {
 				status: 302,
 				redirect: '/photos'

web/src/routes/photos/index.svelte

@@ -2,20 +2,25 @@
 	export const prerender = false;
 
 	import type { Load } from '@sveltejs/kit';
-	import { getAssetsInfo } from '$lib/stores/assets';
+	import { setAssetInfo } from '$lib/stores/assets';
 
-	export const load: Load = async () => {
+	export const load: Load = async ({ fetch }) => {
 		try {
-			const { data } = await api.userApi.getMyUserInfo();
-			await getAssetsInfo();
+			const [userInfo, assets] = await Promise.all([
+				fetch('/data/user/get-my-user-info').then((r) => r.json()),
+				fetch('/data/asset/get-all-assets').then((r) => r.json())
+			]);
+
+			setAssetInfo(assets);
 
 			return {
 				status: 200,
 				props: {
-					user: data
+					user: userInfo
 				}
 			};
 		} catch (e) {
+			console.log('ERROR load photos index');
 			return {
 				status: 302,
 				redirect: '/auth/login'
@@ -33,7 +38,7 @@
 	import moment from 'moment';
 	import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
-	import { api, AssetResponseDto, UserResponseDto } from '@api';
+	import { AssetResponseDto, UserResponseDto } from '@api';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 
 	export let user: UserResponseDto;

web/src/routes/sharing/index.svelte

@@ -4,10 +4,12 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto, api, UserResponseDto } from '@api';
 
-	export const load: Load = async () => {
+	export const load: Load = async ({ fetch }) => {
 		try {
-			const { data: user } = await api.userApi.getMyUserInfo();
-			const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
+			const [user, sharedAlbums] = await Promise.all([
+				fetch('/data/user/get-my-user-info').then((r) => r.json()),
+				fetch('/data/album/get-all-albums?isShared=true').then((r) => r.json())
+			]);
 
 			return {
 				status: 200,