merge: #3977

3977: feat: allow setting arbitrary runtime env vars in the web container r=sprutton1 a=sprutton1

Vite forces you to use env vars for config and then also forces you to set them at build time. This is some hot, hot garbage. This library allows us to pull in arbitrary env vars. We also then do some string replacement when starting the container so we can have dynamic config in the different environments.

<img src="https://media2.giphy.com/media/5MZcPvGU7HuvDbLCPg/giphy.gif"/>

Co-authored-by: Scott Prutton <[email protected]>

app/web/.env

@@ -44,3 +44,4 @@ VITE_POSTHOG_API_HOST=https://e.systeminit.com
 # VITE_LOG_WS=true                      # turn on console logging for all WS events except cursor and online events
 # VITE_LOG_WS_CURSOR=true               # turn on console logging for cursor related WS events
 # VITE_LOG_WS_ONLINE=true               # turn on console logging for online related WS events
+VITE_OTEL_EXPORTER_OTLP_ENDPOINT="http://$DEV_HOST"

app/web/Dockerfile

@@ -23,7 +23,7 @@ ARG APP=web
 
 # hadolint ignore=DL3018
 RUN set -eux; \
-    apk add --no-cache runuser; \
+    apk add --no-cache runuser moreutils envsubst; \
     for dir in /run /etc /usr/local/etc; do \
         mkdir -pv "$dir/$APP"; \
     done; \

app/web/docker-entrypoint.sh

@@ -6,6 +6,15 @@ main() {
     echo "Info: SI__WEB__SDF_HOST supplied [ $SI__WEB__SDF_HOST ]! Registering in nginx.conf"
     sed -i "s^server sdf:5156^server $SI__WEB__SDF_HOST^g" "$(find /nix/store/ -path '/nix/store/*web/conf/nginx.conf')"
   fi
+
+  if [ -n "${VITE_OTEL_EXPORTER_OTLP_ENDPOINT:-}" ]; then
+    echo "Info: VITE_OTEL_EXPORTER_OTLP_ENDPOINT supplied [ $VITE_OTEL_EXPORTER_OTLP_ENDPOINT ]! Setting in web"
+    projectEnvVariables=$(find /nix/store -name "projectEnvVar*.js" | head -n 1)
+    tmp=$(mktemp)
+    envsubst <"$projectEnvVariables" >"$tmp"
+    mv "$tmp" "$projectEnvVariables"
+    chmod +rx "$projectEnvVariables"
+  fi
   exec @@nginx@@ -c @@conf@@ -p @@prefix@@ -g "daemon off;" "$@"
 }
 

app/web/src/main.ts

@@ -19,19 +19,24 @@ import "@si/vue-lib/tailwind/main.css";
 import "@si/vue-lib/tailwind/tailwind.css";
 
 import App from "@/App.vue";
+import { getProjectEnvVariables } from "./shared/dynamicEnvVars";
 import "./utils/posthog";
 import router from "./router";
 import store from "./store";
 
+const { envVariables } = getProjectEnvVariables();
+
 const backendHosts = import.meta.env.VITE_BACKEND_HOSTS
   ? JSON.parse(import.meta.env.VITE_BACKEND_HOSTS).map(
       (r: string) => new RegExp(r),
     )
   : [];
+
+const otelEndpoint =
+  envVariables.VITE_OTEL_EXPORTER_OTLP_ENDPOINT ??
+  import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT;
 const sdk = new HoneycombWebSDK({
-  endpoint: `${
-    import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT
-  }:4318/v1/traces`,
+  endpoint: `${otelEndpoint}:4318/v1/traces`,
   serviceName: "si-vue",
   skipOptionsValidation: true,
   instrumentations: [

app/web/src/shared/dynamicEnvVars.ts

@@ -0,0 +1,23 @@
+type ProjectEnvVariablesType = Pick<
+  ImportMetaEnv,
+  "VITE_OTEL_EXPORTER_OTLP_ENDPOINT"
+>;
+
+// We must use `${}` so this variable gets replaced in the docker container
+const projectEnvVariables: ProjectEnvVariablesType = {
+  VITE_OTEL_EXPORTER_OTLP_ENDPOINT: "${VITE_OTEL_EXPORTER_OTLP_ENDPOINT}", // eslint-disable-line no-template-curly-in-string
+};
+
+// Returning the variable value from runtime or obtained as a result of the build
+export const getProjectEnvVariables = (): {
+  envVariables: ProjectEnvVariablesType;
+} => {
+  return {
+    envVariables: {
+      VITE_OTEL_EXPORTER_OTLP_ENDPOINT:
+        !projectEnvVariables.VITE_OTEL_EXPORTER_OTLP_ENDPOINT.includes("VITE_")
+          ? projectEnvVariables.VITE_OTEL_EXPORTER_OTLP_ENDPOINT
+          : import.meta.env.VITE_OTEL_EXPORTER_OTLP_ENDPOINT,
+    },
+  };
+};

app/web/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_OTEL_EXPORTER_OTLP_ENDPOINT: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

app/web/vite.config.ts

@@ -106,6 +106,20 @@ export default (opts: { mode: string }) => {
     },
     build: {
       manifest: true,
+      rollupOptions: {
+           output: {
+               format: 'es',
+               globals: {
+                   react: 'React',
+                   'react-dom': 'ReactDOM',
+               },
+               manualChunks(id) {
+                   if (/dynamicEnvVars.ts/.test(id)) {
+                       return 'projectEnvVariables'
+                   }
+               },
+           },
+       }
     },
   });
 };