fix(web): load UI locale from repo-root .env and CI build (#423)

* fix(web): load UI locale from repo-root .env and CI build

NUXT_PUBLIC_UI_LOCALE is baked at Nuxt build time. The monorepo keeps
.env.example at the repo root, but Nuxt only auto-loaded packages/web/.env,
so setting NUXT_PUBLIC_UI_LOCALE=sk in root .env had no effect.

- Load repo-root .env in nuxt.config before reading runtimeConfig
- Resolve locale via runtimeConfig fallback; use proxy strings in all modes
- Pass NUXT_PUBLIC_UI_LOCALE through deploy.yml web build step
- Document build-time requirement in workers-deploy-env.md

Co-authored-by: Jakub Doboš <[email protected]>

* fix: apply CodeRabbit auto-fixes

Fixed 2 file(s) based on 1 unresolved review comment.

Co-authored-by: CodeRabbit <[email protected]>

* fix(ci): restore package-lock.json after CodeRabbit auto-edit

CodeRabbit commit 87d0f7c removed nested lockfile entries required by
npm ci. Restore lockfile from main; keep the resolveUiLocale cache fix.

Co-authored-by: Jakub Doboš <[email protected]>

---------

Co-authored-by: Cursor Agent <[email protected]>
Co-authored-by: Jakub Doboš <[email protected]>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: CodeRabbit <[email protected]>

Author: 4 people

.github/workflows/deploy.yml

@@ -30,6 +30,7 @@ jobs:
       EXPECTED_ALLOWED_ORIGINS: ${{ vars.ALLOWED_ORIGINS_STAGING }}
       NUXT_PUBLIC_DEPLOY_TIER: staging
       NUXT_PUBLIC_GIT_COMMIT: ${{ github.sha }}
+      NUXT_PUBLIC_UI_LOCALE: ${{ vars.NUXT_PUBLIC_UI_LOCALE }}
       NUXT_PUBLIC_SENTRY_DSN: ${{ vars.NUXT_PUBLIC_SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
     steps:
@@ -60,6 +61,7 @@ jobs:
         env:
           API_URL: ${{ env.API_BASE_URL }}
           NUXT_PUBLIC_SITE_URL: ${{ env.FRONTEND_URL }}
+          NUXT_PUBLIC_UI_LOCALE: ${{ env.NUXT_PUBLIC_UI_LOCALE }}
           NODE_ENV: production
         run: npm run build
 
@@ -131,6 +133,7 @@ jobs:
       NUXT_PUBLIC_DEPLOY_TIER: production
       NUXT_PUBLIC_APP_VERSION: ${{ startsWith(github.ref, 'refs/tags/v') && github.ref_name || '' }}
       NUXT_PUBLIC_GIT_COMMIT: ${{ github.sha }}
+      NUXT_PUBLIC_UI_LOCALE: ${{ vars.NUXT_PUBLIC_UI_LOCALE }}
       NUXT_PUBLIC_SENTRY_DSN: ${{ vars.NUXT_PUBLIC_SENTRY_DSN }}
       SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
     steps:
@@ -167,6 +170,7 @@ jobs:
         env:
           API_URL: ${{ env.API_BASE_URL }}
           NUXT_PUBLIC_SITE_URL: ${{ env.FRONTEND_URL }}
+          NUXT_PUBLIC_UI_LOCALE: ${{ env.NUXT_PUBLIC_UI_LOCALE }}
           NODE_ENV: production
         run: npm run build
 

packages/web/docs/workers-deploy-env.md

@@ -15,6 +15,7 @@ Read in `nuxt.config.ts` via `process.env` and embedded into the client/server b
 |----------|----------|-----------|
 | `API_URL` | `runtimeConfig.public.apiUrl` | `vars.API_URL_STAGING` / `vars.API_URL_PROD` |
 | `NUXT_PUBLIC_SITE_URL` | `runtimeConfig.public.siteUrl`, OG URLs | `vars.FRONTEND_URL_STAGING` / `vars.FRONTEND_URL_PROD` |
+| `NUXT_PUBLIC_UI_LOCALE` | UI copy catalog (`en`, `sk`, `cs`) — **baked at build**; runtime Worker vars do not change language | `vars.NUXT_PUBLIC_UI_LOCALE` (defaults to `en` when unset) |
 | `NUXT_PUBLIC_DEPLOY_TIER` | Admin footer build label | `staging` / `production` in `deploy.yml` |
 | `NUXT_PUBLIC_GIT_COMMIT` | Admin footer git SHA | `${{ github.sha }}` |
 | `NUXT_PUBLIC_APP_VERSION` | Admin footer on production tags | tag name on prod deploy |
@@ -26,6 +27,12 @@ Read in `nuxt.config.ts` via `process.env` and embedded into the client/server b
 
 No server-only secrets are required for the current Nuxt app. All config used at runtime today is in `runtimeConfig.public` (build-time).
 
+`NUXT_PUBLIC_UI_LOCALE` must be present when `npm run build` runs (CI build step or local command). Setting it only on the Cloudflare Worker after deploy has no effect — rebuild and redeploy.
+
+### Local dev
+
+Copy `.env.example` to the **repo root** `.env` (or `packages/web/.env`) and set `NUXT_PUBLIC_UI_LOCALE=sk`. Restart `nuxi dev` after changing locale. The web package also loads the repo-root `.env` so root and `packages/web/.env` both work.
+
 ## GitHub Actions secrets (web Worker deploy)
 
 Uses the same environment-scoped tokens as the API Worker:

packages/web/nuxt.config.ts

@@ -1,6 +1,9 @@
 import { readBuildInfoDefaults } from './utils/buildInfoSource'
+import { loadMonorepoRootEnv } from './utils/loadMonorepoRootEnv'
 import { parseEnvBoolean, parseTracesSampleRate } from './utils/sentryOptions'
 
+loadMonorepoRootEnv()
+
 const buildInfo = readBuildInfoDefaults()
 
 export default defineNuxtConfig({

packages/web/utils/loadMonorepoRootEnv.ts

@@ -0,0 +1,26 @@
+import { existsSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { config as loadDotenv } from 'dotenv'
+
+/**
+ * Load repo-root `.env` into `process.env` when keys are not already set.
+ *
+ * `.env.example` lives at the monorepo root, but Nuxt only auto-loads
+ * `packages/web/.env`. Without this, `NUXT_PUBLIC_UI_LOCALE` and other
+ * shared vars copied to root `.env` are ignored during `nuxi dev` / `nuxi build`.
+ */
+export function loadMonorepoRootEnv(): void {
+  const monorepoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../..')
+  const rootEnvPath = resolve(monorepoRoot, '.env')
+  if (!existsSync(rootEnvPath)) return
+
+  const parsed = loadDotenv({ path: rootEnvPath, processEnv: {} }).parsed
+  if (!parsed) return
+
+  for (const [key, value] of Object.entries(parsed)) {
+    if (process.env[key] === undefined) {
+      process.env[key] = value
+    }
+  }
+}

packages/web/utils/resolveUiLocale.ts

@@ -9,13 +9,38 @@ export const DEV_UI_LOCALE_COOKIE = 'vmp_dev_ui_locale'
  * UI locale baked into this build from `NUXT_PUBLIC_UI_LOCALE`.
  * Production instances use this exclusively.
  */
+function readUiLocaleFromEnv(): string | undefined {
+  const fromImportMeta =
+    typeof import.meta !== 'undefined' ? import.meta.env?.NUXT_PUBLIC_UI_LOCALE : undefined
+  if (typeof fromImportMeta === 'string' && fromImportMeta) return fromImportMeta
+
+  const fromProcess = typeof process !== 'undefined' ? process.env.NUXT_PUBLIC_UI_LOCALE : undefined
+  if (typeof fromProcess === 'string' && fromProcess) return fromProcess
+
+  return undefined
+}
+
 export function getBuildUiLocale(): UiLocale {
   if (cachedBuildLocale) return cachedBuildLocale
-  const fromEnv =
-    (typeof import.meta !== 'undefined' && import.meta.env?.NUXT_PUBLIC_UI_LOCALE) ||
-    (typeof process !== 'undefined' ? process.env.NUXT_PUBLIC_UI_LOCALE : undefined)
-  cachedBuildLocale = parseUiLocale(typeof fromEnv === 'string' ? fromEnv : undefined)
-  return cachedBuildLocale
+
+  let fromEnv = readUiLocaleFromEnv()
+  if (!fromEnv) {
+    try {
+      const config = useRuntimeConfig()
+      const fromRuntime = config.public.uiLocale
+      if (typeof fromRuntime === 'string' && fromRuntime) fromEnv = fromRuntime
+    } catch {
+      // Outside Nuxt setup (e.g. static import timing) — fall through to default.
+    }
+  }
+
+  if (fromEnv) {
+    cachedBuildLocale = parseUiLocale(fromEnv)
+    return cachedBuildLocale
+  }
+
+  // No valid locale found — return fallback without caching.
+  return parseUiLocale(undefined)
 }
 
 /**

packages/web/utils/strings.ts

@@ -5,20 +5,22 @@
  * Development: optional cookie override via the locale preview bar for in-context review.
  */
 import type { Strings } from '~/locales'
-import { getActiveLocaleCatalog, getBuildLocaleCatalog } from '~/utils/resolveUiLocale'
+import { getActiveLocaleCatalog } from '~/utils/resolveUiLocale'
 
 export type { PaymentProvider, PlanType, Strings } from '~/locales'
 
-function createDevStringsProxy(): Strings {
+function createStringsProxy(): Strings {
   return new Proxy({} as Strings, {
     get(_target, prop) {
-      const value = getActiveLocaleCatalog().strings[prop as keyof Strings]
+      const catalog = getActiveLocaleCatalog()
+      const value = catalog.strings[prop as keyof Strings]
       if (typeof value === 'function') {
-        return (value as (...args: unknown[]) => unknown).bind(getActiveLocaleCatalog().strings)
+        return (value as (...args: unknown[]) => unknown).bind(catalog.strings)
       }
       return value
     },
   })
 }
 
-export default import.meta.dev ? createDevStringsProxy() : getBuildLocaleCatalog().strings
+/** Resolves against the active locale on each access (build default or dev cookie override). */
+export default createStringsProxy()