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>
This commit is contained in:
Émile Ré
2026-07-21 18:19:14 +02:00
parent 87033df505
commit 48c7585797
2 changed files with 63 additions and 42 deletions

View File

@@ -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

View File

@@ -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({
plugins: [
goHtmlTemplateDevDefaults(),
react(),
babel({ plugins: ["relay"] }),
tailwindcss(),
],
build: {
assetsDir: "assets",
rolldownOptions: {
output: {
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\//,
},
],
export default defineConfig(({ mode, command }) => {
const envDir = fileURLToPath(new URL(".", import.meta.url));
// Empty prefix: load non-VITE_ vars too (proxy target is Node-only).
const env = loadEnv(mode, envDir, "");
const proxyTarget = env.COMPLIANCE_PORTAL_PROXY_TARGET;
if (command === "serve" && !proxyTarget) {
throw new Error(
"COMPLIANCE_PORTAL_PROXY_TARGET is required in apps/compliance-portal/.env",
);
}
return {
plugins: [
goHtmlTemplateDevDefaults(),
react(),
babel({ plugins: ["relay"] }),
tailwindcss(),
],
build: {
assetsDir: "assets",
rolldownOptions: {
output: {
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: "./",
server: {
port: 5174,
proxy: {
"^/trust/[^/]+/api": {
target: "http://localhost:8080",
changeOrigin: true,
base: "./",
server: {
port: 5174,
proxy: proxyTarget
? {
"^/graphql": {
// Host-routed compliance-portal API (trust-center HTTPS listener).
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)),
},
},
};
});