better dev setup

frontend/.env.local.example

@@ -9,4 +9,6 @@
 # SENTRY_AUTH_TOKEN=YOUR_TOKEN
 # SENTRY_ORG=vikunja
 # SENTRY_PROJECT=frontend-oss
-# VIKUNJA_FRONTEND_BASE=/custom-subpath
+# VIKUNJA_FRONTEND_BASE=/custom-subpath
+
+# DEV_PROXY=http://vikunja-backend.domain.tld

frontend/index.html

@@ -22,7 +22,7 @@
 	// This variable points the frontend to the api.
 	// It has to be the full url, including the last /api/v1 part and port.
 	// You can change this if your api is not reachable on the same port as the frontend.
-	window.API_URL = 'http://localhost:3456/api/v1'
+	window.API_URL = '/api/v1'
 </script>
 </body>
 </html>

frontend/vite.config.ts

@@ -66,12 +66,24 @@ function createFontMatcher(fontNames: string[]) {
 }
 
 // https://vitejs.dev/config/
-export default defineConfig(({mode}) => {
+export default defineConfig(({command, mode}) => {
 	// Load env file based on `mode` in the current working directory.
 	// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
 	// https://vitejs.dev/config/#environment-variables
 	const env = loadEnv(mode, process.cwd(), '')
 
+	switch (command) {
+		case 'serve':
+			// this is DEV mode 
+			return getServeConfig(env)
+			// return getBuildConfig(env)
+		case 'build':
+			// build for prodution
+			return getBuildConfig(env)
+	}
+})
+
+function getBuildConfig(env: Record<string, string>) {
 	return {
 		base: env.VIKUNJA_FRONTEND_BASE,
 		// https://vitest.dev/config/
@@ -220,4 +232,23 @@ export default defineConfig(({mode}) => {
 			},
 		},
 	}
-})
+}
+
+function getServeConfig(env: Record<string, string>) {
+	// get some default settings from prod mod
+	const buildConfig = getBuildConfig(env)
+	// override prod settings with dev settings
+	return {
+		...buildConfig,
+		server: {
+			...buildConfig.server,
+			...(env.DEV_PROXY && { proxy: {
+				'/api': {
+					target: env.DEV_PROXY,
+					changeOrigin: true,
+					secure: false,
+				},
+			}}),
+		},
+	}
+}