Move env var JS globals into /client_configuration

Removes the inline <script> block from _head.html.erb that set
window.intercodeAssetsHost, window.sentryFrontendDSN, and
window.rollbarClientAccessToken. All three values now come from the
/client_configuration JSON endpoint, which the SPA already fetches at
boot.

- assets_host: set on window.intercodeAssetsHost after bootstrap
  resolves, so lazy route chunks still use the CDN; initial chunks
  on cold load fall back to the origin server (which serves /packs)
- sentry_frontend_dsn / rollbar_client_access_token: passed as
  constructor args to ErrorReporting rather than read from window;
  AppRoot reads them via useRouteLoaderData('root')

This is the first step toward serving a fully static HTML shell for
all SPA routes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: nbudin

CLAUDE.md

@@ -26,6 +26,13 @@ Intercode is a convention management system built with:
 - **TypeScript**: Run `yarn run tsc --noEmit` after making changes
 - **Ruby**: Run the relevant test suite before committing
 
+## Deployment Model
+
+Intercode is shipped as a Docker container with the frontend assets **pre-built at image build time**. Environment variables (including `ASSETS_HOST`, `SENTRY_FRONTEND_DSN`, `ROLLBAR_CLIENT_ACCESS_TOKEN`, etc.) are injected at **container runtime**, not at build time. This means:
+
+- Do not use Vite `define`, `import.meta.env`, or any other build-time constant substitution for runtime env vars.
+- Runtime configuration must be delivered to the browser via a server-rendered response (e.g. the `GET /client_configuration` endpoint) or a server-rendered HTML attribute, never baked into the JS bundle.
+
 ## Testing Requirements
 
 Whenever changing signup-related functionality (signup services, ranked choice, waitlists, etc.), always add or update tests in the relevant test file under `test/services/` or `test/models/`.

app/controllers/client_configuration_controller.rb

@@ -16,7 +16,10 @@ def show
              oidc_issuer_url: oidc_issuer_url,
              rails_default_active_storage_service_name: Rails.application.config.active_storage.service.to_s,
              rails_direct_uploads_url: rails_direct_uploads_url,
-             recaptcha_site_key: Recaptcha.configuration.site_key
+             recaptcha_site_key: Recaptcha.configuration.site_key,
+             assets_host: ENV["ASSETS_HOST"].presence,
+             sentry_frontend_dsn: ENV["SENTRY_FRONTEND_DSN"].presence,
+             rollbar_client_access_token: ENV["ROLLBAR_CLIENT_ACCESS_TOKEN"].presence
            }
   end
 end

app/javascript/@types/globals.d.ts

@@ -1,6 +1,4 @@
 interface Window {
   intercodeAssetsHost?: string;
-  sentryFrontendDSN?: string;
-  rollbarClientAccessToken?: string;
   __intercodeAssetURL: (filename: string) => string;
 }

app/javascript/AppContexts.ts

@@ -13,6 +13,9 @@ export type ClientConfiguration = {
   rails_default_active_storage_service_name: string;
   rails_direct_uploads_url: string;
   recaptcha_site_key: string | null;
+  assets_host: string | null;
+  sentry_frontend_dsn: string | null;
+  rollbar_client_access_token: string | null;
 };
 
 export const authenticityTokensManagerContext = createContext<AuthenticityTokensManager>();

app/javascript/AppRoot.tsx

@@ -1,5 +1,5 @@
 import { Suspense, useMemo, useState, useEffect, useRef } from 'react';
-import { useLocation, useLoaderData, Outlet, useNavigation } from 'react-router';
+import { useLocation, useLoaderData, useRouteLoaderData, Outlet, useNavigation } from 'react-router';
 import { Settings } from 'luxon';
 import { PageLoadingIndicator } from '@neinteractiveliterature/litform';
 
@@ -12,6 +12,7 @@ import { LazyStripeContext } from './LazyStripe';
 import { Stripe } from '@stripe/stripe-js';
 import { reloadOnAppEntrypointHeadersMismatch } from './checkAppEntrypointHeadersMatch';
 import { initErrorReporting } from 'ErrorReporting';
+import { RootLoaderData } from 'root';
 
 export function buildAppRootContextValue(
   data: AppRootQueryData | null | undefined,
@@ -81,10 +82,15 @@ function AppRoot(): React.JSX.Element {
   const navigationBarRef = useRef<HTMLElement>(null);
 
   const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null);
+  const rootLoaderData = useRouteLoaderData('root') as RootLoaderData | undefined;
 
   useEffect(() => {
-    initErrorReporting(data.currentUser?.id);
-  }, [data?.currentUser?.id]);
+    initErrorReporting(
+      data.currentUser?.id,
+      rootLoaderData?.clientConfiguration?.sentry_frontend_dsn,
+      rootLoaderData?.clientConfiguration?.rollbar_client_access_token,
+    );
+  }, [data?.currentUser?.id, rootLoaderData?.clientConfiguration]);
 
   useEffect(() => {
     reloadOnAppEntrypointHeadersMismatch();

app/javascript/ErrorReporting.ts

@@ -25,10 +25,10 @@ class ErrorReporting {
     return ErrorReporting.instance!;
   }
 
-  constructor(currentUserId: string | undefined) {
-    if (window.sentryFrontendDSN) {
+  constructor(currentUserId: string | undefined, sentryDsn?: string | null, rollbarToken?: string | null) {
+    if (sentryDsn) {
       import('@sentry/browser').then((Sentry) => {
-        const instance = Sentry.init({ dsn: window.sentryFrontendDSN });
+        const instance = Sentry.init({ dsn: sentryDsn });
         if (instance != null) {
           this.sentry = {
             instance,
@@ -42,10 +42,10 @@ class ErrorReporting {
       });
     }
 
-    if (window.rollbarClientAccessToken) {
+    if (rollbarToken) {
       import('rollbar').then((Rollbar) => {
         this.rollbar = Rollbar.default.init({
-          accessToken: window.rollbarClientAccessToken,
+          accessToken: rollbarToken,
           captureUncaught: true,
           captureUnhandledRejections: true,
           captureIp: 'anonymize',

app/javascript/packs/application.tsx

@@ -62,6 +62,11 @@ const bootstrapPromise: Promise<Bootstrap> = (async () => {
     window.location.href = redirectUrl.toString();
   });
 
+  // Make the CDN host available for lazy chunk loading (renderBuiltUrl reads this at call time).
+  if (clientConfiguration.assets_host) {
+    window.intercodeAssetsHost = clientConfiguration.assets_host;
+  }
+
   return { clientConfiguration, authenticityTokensManager, authManager, client };
 })();
 
@@ -73,6 +78,7 @@ function DataModeApplicationEntry() {
       createBrowserRouter(
         [
           {
+            id: 'root',
             lazy: () => import('root'),
             children: appRootRoutes,
           },

app/javascript/root.tsx

@@ -11,7 +11,7 @@ import AuthenticityTokensManager, { AuthenticityTokensContext } from 'Authentici
 import { StrictMode } from 'react';
 import { LoaderFunction, useLoaderData } from 'react-router';
 
-type RootLoaderData = {
+export type RootLoaderData = {
   clientConfiguration: ClientConfiguration;
   authenticityTokensManager: AuthenticityTokensManager;
   client: ApolloClient;

app/views/layouts/_head.html.erb

@@ -1,16 +1,5 @@
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
 <title><%= page_title %></title>
-<script type="application/javascript">
-  <% if ENV['ASSETS_HOST'].present? -%>
-    window.intercodeAssetsHost = <%=raw ENV['ASSETS_HOST'].to_json %>;
-  <% end -%>
-  <% if ENV['SENTRY_FRONTEND_DSN'].present? -%>
-    window.sentryFrontendDSN = <%=raw ENV['SENTRY_FRONTEND_DSN'].to_json %>;
-  <% end -%>
-  <% if ENV["ROLLBAR_CLIENT_ACCESS_TOKEN"].present? -%>
-    window.rollbarClientAccessToken = <%=raw ENV['ROLLBAR_CLIENT_ACCESS_TOKEN'].to_json %>;
-  <% end -%>
-</script>
 <% if Rails.env.development? %>
   <script type="module">
     import RefreshRuntime from <%=raw url_with_possible_host("/@react-refresh", ENV['ASSETS_HOST']).to_json %>