🎭 Adds environment variables for modes

app/.env.embedded

@@ -0,0 +1,3 @@
+VITE_API_URL="leika.local"
+VITE_SOCKET_URL="leika.local"
+VITE_EMBEDDED_BUILD=true

app/.env.mock_embedded

@@ -0,0 +1,3 @@
+VITE_API_URL="hostname"
+VITE_SOCKET_URL="hostname:2096"
+VITE_EMBEDDED_BUILD=true

app/.env.mock_web

@@ -0,0 +1,3 @@
+VITE_API_URL="hostname"
+VITE_SOCKET_URL="hostname:2096"
+VITE_EMBEDDED_BUILD=false

app/.env.web

@@ -0,0 +1,3 @@
+VITE_API_URL="leika.local"
+VITE_SOCKET_URL="leika.local"
+VITE_EMBEDDED_BUILD=false

app/package.json

@@ -4,10 +4,12 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
-		"dev:mock": "vite --mode MOCK",
-		"build": "cross-env FOR_EMBEDDED=true vite build",
-		"build:web": "cross-env FOR_EMBEDDED=false vite build --mode WEB",
+		"dev": "vite --mode embedded",
+		"dev:mock_embedded": "vite --mode mock_embedded",
+		"dev:mock_web": "vite --mode mock_web",
+		"build": "vite build --mode embedded",
+		"build:mock_web": "vite build --mode mock_web",
+		"build:web": "vite build --mode web",
 		"preview": "vite preview",
 		"test": "vitest",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -21,6 +23,7 @@
 		"@typescript-eslint/parser": "^6.20.0",
 		"autoprefixer": "^10.4.17",
 		"cross-env": "^7.0.3",
+		"dotenv": "^16.4.5",
 		"husky": "^9.0.7",
 		"lint-staged": "^15.2.0",
 		"postcss": "^8.4.33",
@@ -49,4 +52,4 @@
 		"*.js": "eslint --cache --fix",
 		"*.{js,css,md,ts,svelte}": "prettier --write"
 	}
-}
+}

app/pnpm-lock.yaml

@@ -49,6 +49,9 @@ devDependencies:
   cross-env:
     specifier: ^7.0.3
     version: 7.0.3
+  dotenv:
+    specifier: ^16.4.5
+    version: 16.4.5
   husky:
     specifier: ^9.0.7
     version: 9.0.7
@@ -1168,6 +1171,11 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+    dev: true
+
   /electron-to-chromium@1.4.649:
     resolution: {integrity: sha512-dq/owIaALxZGqWm5RXpKQ4baX6aDC19e2Z16c8SXYN+I71PyEKjbVqQUgm7kcuk8CRqljTKXbolo0XXDjxnh2w==}
     dev: true

app/src/lib/utilities/location-utilities.ts

@@ -1,8 +1,11 @@
-const forWeb = import.meta.env.MODE === 'WEB';
-const mock = import.meta.env.MODE === 'MOCK';
+export const webAppBuild = import.meta.env.MODE === 'WEB';
+export const hostname = window.location.hostname;
 
-export const location = mock ? `${window.location.hostname}:2096` : 'leika.local';
+export const isSecure = window.location.protocol === 'https:';
 
-export const socketLocation = forWeb
-	? `wss://${window.location.hostname}:2096`
-	: `ws://${location}`;
+export const location = import.meta.env.VITE_API_URL.replace('hostname', hostname);
+
+const socketScheme = isSecure ? 'wss://' : 'ws://';
+
+export const socketLocation =
+	socketScheme + import.meta.env.VITE_SOCKET_URL.replace('hostname', hostname);

app/src/lib/utilities/svelte-utilities.ts

@@ -1,5 +1,7 @@
 import { writable } from 'svelte/store';
 
+export const isEmbeddedApp = import.meta.env.VITE_EMBEDDED_BUILD === 'true';
+
 export const persistentStore = (key: string, initialValue: any) => {
 	const savedValue = JSON.parse(localStorage.getItem(key) as string);
 	const data = savedValue !== null ? savedValue : initialValue;

app/vite.config.ts

@@ -3,17 +3,18 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import viteCompression from 'vite-plugin-compression';
 import path from 'path';
+import 'dotenv/config';
 
-const forEmbedded = process.env.FOR_EMBEDDED == 'true';
+const embeddedBuild = process.env.VITE_EMBEDDED_BUILD == 'true';
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [
 		svelte(),
-		...(forEmbedded ? [viteSingleFile(), viteCompression({ deleteOriginFile: true })] : [])
+		...(embeddedBuild ? [viteSingleFile(), viteCompression({ deleteOriginFile: true })] : [])
 	],
 	build: {
-		outDir: forEmbedded ? '../data' : './build',
+		outDir: embeddedBuild ? '../data' : './build',
 		emptyOutDir: true
 	},
 	resolve: {