From 1f17720be2f99e846affab3f909e27a182dc185e Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 7 Apr 2023 21:44:56 -0400
Subject: [PATCH] chore: run web (only) with remote backend (#2196)

---
 docs/docs/developer/setup.md | 12 ++++++++++++
 web/vite.config.js           | 13 +++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/docs/docs/developer/setup.md b/docs/docs/developer/setup.md
index 362c32627a..a088ab87ba 100644
--- a/docs/docs/developer/setup.md
+++ b/docs/docs/developer/setup.md
@@ -43,6 +43,18 @@ The mobile app `(/mobile)` will required Flutter toolchain to be installed on yo
 
 Please refer to the [Flutter's official documentation](https://flutter.dev/docs/get-started/install) for more information on setting up the toolchain on your machine.
 
+### Connect to a remote backend
+
+If you only want to do web development connected to an existing, remote backend, follow these steps:
+
+1. Enter the web directory - `cd web/`
+2. Install web dependencies - `npm i`
+3. Start the web development server
+
+```
+PUBLIC_IMMICH_SERVER_URL=https://demo.immich.app/api npm run dev
+```
+
 ## IDE setup
 
 ### Lint / format extensions
diff --git a/web/vite.config.js b/web/vite.config.js
index 8446d5a80e..474a4219d5 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -9,6 +9,19 @@ const config = {
 			'@api': path.resolve('./src/api')
 		}
 	},
+	server: {
+		// connect to a remote backend during web-only development
+		proxy: {
+			'/api': {
+				target: process.env.PUBLIC_IMMICH_SERVER_URL,
+				secure: true,
+				changeOrigin: true,
+				logLevel: 'debug',
+				rewrite: (path) => path.replace(/^\/api/, ''),
+				ws: true
+			}
+		}
+	},
 	plugins: [sveltekit()]
 };