Proxy GraphQL through a slug-based env host

Hardcoding the trust-center origin broke local portal
development. Read COMPLIANCE_PORTAL_PROXY_TARGET so each
slug can point Vite's /graphql proxy at the right HTTPS host.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/.env.example

@@ -1 +1,5 @@
-VITE_API_URL=http://localhost:8080
+# Browser hits the Vite origin; /graphql is proxied (see vite.config.ts).
+VITE_API_URL=http://localhost:5174
+
+# Compliance-portal HTTPS origin (<slug> is the compliance portal slug).
+COMPLIANCE_PORTAL_PROXY_TARGET=https://<slug>.probopage.localhost

apps/compliance-portal/vite.config.ts

@@ -23,7 +23,7 @@ import { fileURLToPath, URL } from "node:url";
 import babel from "@rolldown/plugin-babel";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { defineConfig, type Plugin } from "vite";
+import { defineConfig, loadEnv, type Plugin } from "vite";
 
 // index.html is also a Go html/template for the production SPA shell. Vite's
 // dev server does not execute those actions, so bare {{if}}/{{range}} text is
@@ -66,49 +66,66 @@ function goHtmlTemplateDevDefaults(): Plugin {
 // https://vite.dev/config/
 // @vitejs/plugin-react@6 (Vite 8) no longer runs Babel, so the Relay tagged
 // template transform is applied via @rolldown/plugin-babel instead.
-export default defineConfig({
+export default defineConfig(({ mode, command }) => {
-  plugins: [
+  const envDir = fileURLToPath(new URL(".", import.meta.url));
-    goHtmlTemplateDevDefaults(),
+  // Empty prefix: load non-VITE_ vars too (proxy target is Node-only).
-    react(),
+  const env = loadEnv(mode, envDir, "");
-    babel({ plugins: ["relay"] }),
+  const proxyTarget = env.COMPLIANCE_PORTAL_PROXY_TARGET;
-    tailwindcss(),
+
-  ],
+  if (command === "serve" && !proxyTarget) {
-  build: {
+    throw new Error(
-    assetsDir: "assets",
+      "COMPLIANCE_PORTAL_PROXY_TARGET is required in apps/compliance-portal/.env",
-    rolldownOptions: {
+    );
-      output: {
+  }
-        codeSplitting: {
+
-          groups: [
+  return {
-            {
+    plugins: [
-              name: "react",
+      goHtmlTemplateDevDefaults(),
-              test: /node_modules\/(?:react-dom|react)\//,
+      react(),
-            },
+      babel({ plugins: ["relay"] }),
-            {
+      tailwindcss(),
-              name: "relay",
+    ],
-              test: /node_modules\/(?:react-relay|relay-runtime)\//,
+    build: {
-            },
+      assetsDir: "assets",
-            {
+      rolldownOptions: {
-              name: "react-router",
+        output: {
-              test: /node_modules\/react-router\//,
+          codeSplitting: {
-            },
+            groups: [
-          ],
+              {
+                name: "react",
+                test: /node_modules\/(?:react-dom|react)\//,
+              },
+              {
+                name: "relay",
+                test: /node_modules\/(?:react-relay|relay-runtime)\//,
+              },
+              {
+                name: "react-router",
+                test: /node_modules\/react-router\//,
+              },
+            ],
+          },
         },
       },
     },
-  },
+    base: "./",
-  base: "./",
+    server: {
-  server: {
+      port: 5174,
-    port: 5174,
+      proxy: proxyTarget
-    proxy: {
+        ? {
-      "^/trust/[^/]+/api": {
+            "^/graphql": {
-        target: "http://localhost:8080",
+              // Host-routed compliance-portal API (trust-center HTTPS listener).
-        changeOrigin: true,
+              target: proxyTarget,
+              changeOrigin: true,
+              secure: false, // local step-ca
+            },
+          }
+        : undefined,
+    },
+    resolve: {
+      alias: {
+        "#": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
-  },
+  };
-  resolve: {
-    alias: {
-      "#": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
 });