Uses .env file

ui-v2/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:4200/api

ui-v2/.storybook/main.ts

@@ -7,4 +7,12 @@ export default {
 		name: "@storybook/react-vite",
 		options: {},
 	},
+	/*
+	 * 👇 The `config` argument contains all the other existing environment variables.
+	 * Either configured in an `.env` file or configured on the command line.
+	 */
+	env: (config) => ({
+		...config,
+		VITE_API_URL: "http://localhost:6006/api",
+	}),
 } satisfies StorybookConfig;

ui-v2/package.json

@@ -4,16 +4,16 @@
 	"version": "0.0.0",
 	"type": "module",
 	"scripts": {
-		"dev": "VITE_API_URL='http://localhost:4200/api' vite",
+		"dev": "vite",
 		"build": "tsc -b && vite build",
-		"test": "VITE_API_URL='http://localhost:4200/api' vitest",
+		"test": "vitest --mode staging",
 		"lint": "eslint .",
 		"lint:fix": "eslint . --fix",
 		"format:check": "biome check",
 		"format": "biome check --write",
 		"preview": "vite preview",
 		"service-sync": "uv run --with-editable ../. ../scripts/generate_oss_openapi_schema.py && npx openapi-typescript oss_schema.json -o src/api/prefect.ts && rm oss_schema.json",
-		"storybook": "VITE_API_URL='http://localhost:6006/api' storybook dev -p 6006",
+		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {

ui-v2/src/api/service.ts

@@ -1,7 +1,7 @@
 import createClient, { type Middleware } from "openapi-fetch";
 import type { paths } from "./prefect.ts"; // generated by openapi-typescript
 
-const BASE_URL = import.meta.env.VITE_API_URL as string;
+const BASE_URL = import.meta.env.VITE_API_URL;
 
 const throwOnError: Middleware = {
 	async onResponse({ response }) {

ui-v2/src/vite-env.d.ts

@@ -1 +1,10 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly VITE_API_URL: string;
+	// more env variables...
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}