dotenv file reading in bazel

.github/workflows/bazel-build.yml

@@ -11,6 +11,23 @@ jobs:
     runs-on:
       - ubuntu-latest
     steps:
+      - name: Expose env variables
+        run: |
+          cat << END > app/gui/.env.production
+          VITE_ENSO_CLOUD_API_URL="${{ vars.ENSO_CLOUD_API_URL }}"
+          VITE_ENSO_CLOUD_CHAT_URL="${{ vars.ENSO_CLOUD_CHAT_URL }}"
+          VITE_ENSO_CLOUD_COGNITO_DOMAIN="${{ vars.ENSO_CLOUD_COGNITO_DOMAIN }}"
+          VITE_ENSO_CLOUD_COGNITO_REGION="${{ vars.ENSO_CLOUD_COGNITO_REGION }}"
+          VITE_ENSO_CLOUD_COGNITO_USER_POOL_ID="${{ vars.ENSO_CLOUD_COGNITO_USER_POOL_ID }}"
+          VITE_ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID="${{ vars.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID }}"
+          VITE_ENSO_CLOUD_ENVIRONMENT="${{ vars.ENSO_CLOUD_ENVIRONMENT }}"
+          VITE_ENSO_CLOUD_GOOGLE_ANALYTICS_TAG="${{ vars.ENSO_CLOUD_GOOGLE_ANALYTICS_TAG }}"
+          VITE_ENSO_CLOUD_SENTRY_DSN="${{ vars.ENSO_CLOUD_SENTRY_DSN }}"
+          VITE_ENSO_CLOUD_STRIPE_KEY="${{ vars.ENSO_CLOUD_STRIPE_KEY }}"
+          VITE_ENSO_AG_GRID_LICENSE_KEY="${{ vars.ENSO_AG_GRID_LICENSE_KEY }}"
+          VITE_ENSO_MAPBOX_API_TOKEN="${{ vars.ENSO_MAPBOX_API_TOKEN }}"
+          VITE_CLOUD_BUILD="false"
+          END
       - uses: bazel-contrib/setup-bazel@0.9.0
         with:
           bazelisk-cache: true
@@ -18,20 +35,6 @@ jobs:
           repository-cache: true
       - uses: actions/checkout@v4
       - run: bazel build //app/gui:dist
-        env:
-          ENSO_CLOUD_API_URL: ${{ vars.ENSO_CLOUD_API_URL }}
-          ENSO_CLOUD_CHAT_URL: ${{ vars.ENSO_CLOUD_CHAT_URL }}
-          ENSO_CLOUD_COGNITO_DOMAIN: ${{ vars.ENSO_CLOUD_COGNITO_DOMAIN }}
-          ENSO_CLOUD_COGNITO_REGION: ${{ vars.ENSO_CLOUD_COGNITO_REGION }}
-          ENSO_CLOUD_COGNITO_USER_POOL_ID: ${{ vars.ENSO_CLOUD_COGNITO_USER_POOL_ID }}
-          ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID: ${{ vars.ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID }}
-          ENSO_CLOUD_ENVIRONMENT: ${{ vars.ENSO_CLOUD_ENVIRONMENT }}
-          ENSO_CLOUD_GOOGLE_ANALYTICS_TAG: ${{ vars.ENSO_CLOUD_GOOGLE_ANALYTICS_TAG }}
-          ENSO_CLOUD_SENTRY_DSN: ${{ vars.ENSO_CLOUD_SENTRY_DSN }}
-          ENSO_CLOUD_STRIPE_KEY: ${{ vars.ENSO_CLOUD_STRIPE_KEY }}
-          VITE_ENSO_AG_GRID_LICENSE_KEY: ${{ vars.ENSO_AG_GRID_LICENSE_KEY }}
-          VITE_ENSO_MAPBOX_API_TOKEN: ${{ vars.ENSO_MAPBOX_API_TOKEN }}
-          CLOUD_BUILD: false
       - name: Get build output location
         run: |
           OUTPUT_SYMLINK=$(bazel cquery --output=files //app/gui:dist)

MODULE.bazel

@@ -179,28 +179,3 @@ use_repo(
     "maven",
     "unpinned_maven",
 )
-
-###################
-### ENVIRONMENT ###
-###################
-secrets = use_extension("//:bazel_scripts/secrets.bzl", "secrets")
-secrets.environment_repo(
-    name = "env",
-    entries = {
-        "BUILD_INFO_VERSION": "SNAPSHOT",
-        "BUILD_INFO_COMMIT_HASH": "SNAPSHOT",
-        "ENSO_CLOUD_ENVIRONMENT": "production",
-        "ENSO_CLOUD_API_URL": "<REQUIRED>",
-        "ENSO_CLOUD_CHAT_URL": "<REQUIRED>",
-        "ENSO_CLOUD_SENTRY_DSN": "<REQUIRED>",
-        "ENSO_CLOUD_STRIPE_KEY": "<REQUIRED>",
-        "ENSO_CLOUD_COGNITO_USER_POOL_ID": "<REQUIRED>",
-        "ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID": "<REQUIRED>",
-        "ENSO_CLOUD_COGNITO_DOMAIN": "<REQUIRED>",
-        "ENSO_CLOUD_COGNITO_REGION": "<REQUIRED>",
-        "PROJECT_MANAGER_URL": "",
-        "YDOC_SERVER_URL": "",
-        "CLOUD_BUILD": "false",
-    }
-)
-use_repo(secrets, "env")

app/gui/.env.bazel

@@ -1,12 +1,12 @@
 # Bazel build step defaults to having all envs left as placeholders, so that they can be replaced late after the vite build step.
-VITE_API_URL = "(%%__VITE_API_URL__%%)"
+VITE_API_URL = "((%__VITE_API_URL__%))"
-VITE_SENTRY_DSN = "(%%__VITE_SENTRY_DSN__%%)"
+VITE_SENTRY_DSN = "((%__VITE_SENTRY_DSN__%))"
-VITE_STRIPE_KEY = "(%%__VITE_STRIPE_KEY__%%)"
+VITE_STRIPE_KEY = "((%__VITE_STRIPE_KEY__%))"
-VITE_CHAT_URL = "(%%__VITE_CHAT_URL__%%)"
+VITE_CHAT_URL = "((%__VITE_CHAT_URL__%))"
-VITE_COGNITO_USER_POOL_ID = "(%%__VITE_COGNITO_USER_POOL_ID__%%)"
+VITE_COGNITO_USER_POOL_ID = "((%__VITE_COGNITO_USER_POOL_ID__%))"
-VITE_COGNITO_USER_POOL_WEB_CLIENT_ID = "(%%__VITE_COGNITO_USER_POOL_WEB_CLIENT_ID__%%)"
+VITE_COGNITO_USER_POOL_WEB_CLIENT_ID = "((%__VITE_COGNITO_USER_POOL_WEB_CLIENT_ID__%))"
-VITE_COGNITO_DOMAIN = "(%%__VITE_COGNITO_DOMAIN__%%)"
+VITE_COGNITO_DOMAIN = "((%__VITE_COGNITO_DOMAIN__%))"
-VITE_COGNITO_REGION = "(%%__VITE_COGNITO_REGION__%%)"
+VITE_COGNITO_REGION = "((%__VITE_COGNITO_REGION__%))"
-VITE_DASHBOARD_VERSION = "(%%__VITE_DASHBOARD_VERSION__%%)"
+VITE_DASHBOARD_VERSION = "((%__VITE_DASHBOARD_VERSION__%))"
-VITE_DASHBOARD_COMMIT_HASH = "(%%__VITE_DASHBOARD_COMMIT_HASH__%%)"
+VITE_DASHBOARD_COMMIT_HASH = "((%__VITE_DASHBOARD_COMMIT_HASH__%))"
-VITE_CLOUD_BUILD = "(%%__VITE_CLOUD_BUILD__%%)"
+VITE_CLOUD_BUILD = "((%__VITE_CLOUD_BUILD__%))"

app/gui/BUILD.bazel

@@ -1,35 +1,57 @@
+load("@aspect_bazel_lib//lib:write_source_files.bzl", "write_source_files")
+load("@aspect_rules_js//js:defs.bzl", "js_binary", "js_run_binary")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
+load("@env//:defs.bzl", "getenv")
 load("@npm//:defs.bzl", "npm_link_all_packages", "npm_link_targets")
 load("@npm//app/gui:vite/package_json.bzl", vite_bin = "bin")
-load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
-load("@aspect_rules_js//js:defs.bzl", "js_binary", "js_run_binary")
-load("@aspect_bazel_lib//lib:write_source_files.bzl", "write_source_files")
-load("@env//:defs.bzl", "getenv")
 
 npm_link_all_packages(name = "node_modules")
 
-ts_config(name = "tsconfig", src = "tsconfig.json", deps = ["//:tsconfig"])
+ts_config(
-ts_config(name = "tsconfig_node", src = "tsconfig.node.json", deps = [":tsconfig"])
+    name = "tsconfig",
-ts_config(name = "tsconfig_app", src = "tsconfig.app.json", deps = [":tsconfig"])
+    src = "tsconfig.json",
-ts_config(name = "tsconfig_scripts", src = "tsconfig.scripts.json")
+    deps = ["//:tsconfig"],
-ts_config(name = "tsconfig_app_vitest", src = "tsconfig.app.vitest.json", deps = [":tsconfig_app"])
+)
 
+ts_config(
+    name = "tsconfig_node",
+    src = "tsconfig.node.json",
+    deps = [":tsconfig"],
+)
 
-BUILD_ENV_VARS = [
+ts_config(
-    "BUILD_INFO_VERSION",
+    name = "tsconfig_app",
-    "BUILD_INFO_COMMIT_HASH",
+    src = "tsconfig.app.json",
-    "ENSO_CLOUD_ENVIRONMENT",
+    deps = [":tsconfig"],
-    "ENSO_CLOUD_API_URL",
+)
-    "ENSO_CLOUD_CHAT_URL",
+
-    "ENSO_CLOUD_SENTRY_DSN",
+ts_config(
-    "ENSO_CLOUD_STRIPE_KEY",
+    name = "tsconfig_scripts",
-    "ENSO_CLOUD_COGNITO_USER_POOL_ID",
+    src = "tsconfig.scripts.json",
-    "ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID",
+)
-    "ENSO_CLOUD_COGNITO_DOMAIN",
+
-    "ENSO_CLOUD_COGNITO_REGION",
+ts_config(
-    "PROJECT_MANAGER_URL",
+    name = "tsconfig_app_vitest",
-    "YDOC_SERVER_URL",
+    src = "tsconfig.app.vitest.json",
-    "CLOUD_BUILD",
+    deps = [":tsconfig_app"],
-]
+)
+
+# BUILD_ENV_VARS = [
+#     "BUILD_INFO_VERSION",
+#     "BUILD_INFO_COMMIT_HASH",
+#     "ENSO_CLOUD_ENVIRONMENT",
+#     "ENSO_CLOUD_API_URL",
+#     "ENSO_CLOUD_CHAT_URL",
+#     "ENSO_CLOUD_SENTRY_DSN",
+#     "ENSO_CLOUD_STRIPE_KEY",
+#     "ENSO_CLOUD_COGNITO_USER_POOL_ID",
+#     "ENSO_CLOUD_COGNITO_USER_POOL_WEB_CLIENT_ID",
+#     "ENSO_CLOUD_COGNITO_DOMAIN",
+#     "ENSO_CLOUD_COGNITO_REGION",
+#     "PROJECT_MANAGER_URL",
+#     "YDOC_SERVER_URL",
+#     "CLOUD_BUILD",
+# ]
 
 ICON_GENERATED_DIR = "src/project-view/util/iconMetadata"
 
@@ -45,25 +67,38 @@ SRCS = [
     "tailwind.config.ts",
     "package.json",
     "index.html",
-] + glob(["src/**", "public/**", "project-manager-shim-middleware/**"], [ICON_GENERATED_DIR + "/**"])
+    ".env.bazel",
-
+] + glob(
+    [
+        "src/**",
+        "public/**",
+        "project-manager-shim-middleware/**",
+    ],
+    [ICON_GENERATED_DIR + "/**"],
+)
 
 vite_bin.vite(
     name = "vite_build",
     srcs = SRCS + npm_link_targets(),
-    args = ["build"],
+    args = [
+        "build",
+        "--mode=bazel",
+    ],
     chdir = package_name(),
-    out_dirs = ["dist"],
     env = {
-        "TRY_LOAD_ENV_FILE": "false",
+        "NODE_ENV": "production",
-    } | {e: '((%__{}__%))'.format(e) for e in BUILD_ENV_VARS}
+    },
+    out_dirs = ["dist"],
 )
 
 vite_bin.vite_binary(
     name = "vite_preview",
     args = ["preview"],
     chdir = package_name(),
-    data = [":vite_build", "vite.config.ts"],
+    data = [
+        "vite.config.ts",
+        ":vite_build",
+    ],
 )
 
 js_binary(
@@ -73,10 +108,10 @@ js_binary(
 
 js_run_binary(
     name = "icon_metadata",
-    tool = ":script_generate_icon_metadata",
-    chdir = package_name(),
     srcs = ["src/project-view/assets/icons.svg"],
+    chdir = package_name(),
     out_dirs = [ICON_GENERATED_DIR],
+    tool = ":script_generate_icon_metadata",
     visibility = ["//visibility:public"],
 )
 
@@ -85,15 +120,24 @@ js_binary(
     entry_point = "scripts/envReplacer.mjs",
 )
 
-DEFINED_ENVS = {k: v for k,v in [(e, getenv(e, False)) for e in BUILD_ENV_VARS] if v != None}
+# DEFINED_ENVS = {k: v for k, v in [(
+#     e,
+#     getenv(e, False),
+# ) for e in BUILD_ENV_VARS] if v != None}
 
 js_run_binary(
     name = "dist",
-    tool = ":script_env_replacer",
+    srcs = [
-    srcs = [":vite_build"],
+        "node_modules/dotenv",
-    args = ["$(rootpath :vite_build)", package_name() + "/env_replaced"],
+        ":vite_build",
+    ] + glob([".env*"]),
+    args = [
+        "$(rootpath :vite_build)",
+        package_name() + "/env_replaced",
+        package_name(),
+    ],
     out_dirs = ["env_replaced"],
-    env = DEFINED_ENVS,
+    tool = ":script_env_replacer",
     visibility = ["//visibility:public"],
 )
 
@@ -109,7 +153,6 @@ write_source_files(
     visibility = ["//visibility:public"],
 )
 
-
 # vue_tsc_bin.vue_tsc_test(
 #     name = "type-check",
 #     args = ["--noEmit"],

app/gui/package.json

@@ -137,6 +137,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "chalk": "^5.3.0",
     "cross-env": "^7.0.3",
+    "dotenv": "^9.0.2",
     "enso-support": "git://github.com/enso-org/enso-bot",
     "fast-check": "^3.15.0",
     "playwright": "^1.39.0",

app/gui/scripts/envReplacer.mjs

@@ -1,23 +1,70 @@
 /* eslint-disable jsdoc/check-tag-names */
 
+// @ts-expect-error missing dotenv typings
+import * as dotenv from 'dotenv'
 import Buffer from 'node:buffer'
 import { createHash } from 'node:crypto'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path/posix'
 import * as process from 'node:process'
 
-if (process.argv.length !== 4 || process.argv[2] == null || process.argv[3] == null)
+/**
+ *
+ * @param {string} mode current environment mode
+ * @param {string} envDir directory with dotenv file
+ * @returns {string[]} list of dotenv file names
+ */
+function getEnvFilesForMode(mode, envDir) {
+  return [
+    /** default file */ `.env`,
+    /** local file */ `.env.local`,
+    /** mode file */ `.env.${mode}`,
+    /** mode local file */ `.env.${mode}.local`,
+  ].map((file) => path.normalize(path.join(envDir, file)))
+}
+
+if (
+  process.argv.length !== 5 ||
+  process.argv[2] == null ||
+  process.argv[3] == null ||
+  process.argv[4] == null
+)
   throw new Error(
-    `Invalid arguments.\nusage:\n  ${process.argv[0]} ${process.argv[1]} <inputDirectory> <outputDirectory>`,
+    `Invalid arguments.\nusage:\n  ${process.argv[0]} ${process.argv[1]} <inputDirectory> <outputDirectory> <dotenvDirectory>`,
   )
 const inputDirectory = process.argv[2]
 const outputDirectory = process.argv[3]
+const dotenvDirectory = process.argv[4]
+
+dotenv.config()
+
+const envFiles = getEnvFilesForMode(process.env.NODE_ENV ?? 'development', dotenvDirectory)
+const envs = await Promise.all(
+  envFiles.map(async (filename) => {
+    try {
+      const envContents = await fs.readFile(filename, 'utf-8')
+      /**
+       * @type {Record<string, string>}
+       */
+      const parsed = dotenv.parse(envContents)
+      return parsed
+    } catch {
+      return {}
+    }
+  }),
+)
+
+const combinedEnvs = Object.assign({}, ...envs)
+
+console.error('==============')
+console.error('ENVS:')
+console.error(combinedEnvs)
 
 /**
  * Map of calls mkdir performed so far, to avoid calling it twice on the same path.
  * @type {Map<string, Promise<unknown>>}
  */
-var mkdirPromises = new Map()
+const mkdirPromises = new Map()
 
 /**
  * All path renames performed so far, mapping old to new relative project paths.
@@ -66,12 +113,20 @@ async function processReplacements(projectPath) {
   const newContent = (await readOriginalFile(projectPath))
     .toString()
     .replace(patternRegex, (pattern, envName) => {
+      const envValue = process.env[pattern]
       if (
-        Object.hasOwnProperty.call(process.env, envName) &&
+        Object.prototype.hasOwnProperty.call(process.env, envName) &&
-        typeof process.env[envName] == 'string'
+        typeof envValue === 'string'
-      )
+      ) {
-        return process.env[envName]
+        return envValue
-      else {
+      }
+      const envFileValue = combinedEnvs[envName]
+      if (
+        Object.prototype.hasOwnProperty.call(combinedEnvs, envName) &&
+        typeof envFileValue === 'string'
+      ) {
+        return envFileValue
+      } else {
         errors.push(
           new Error(
             `Missing environment variable for replacemnet pattern ${pattern} in file ${projectPath}`,

app/gui/src/config.ts

@@ -25,7 +25,11 @@ const $config = {
   CLOUD_BUILD: import.meta.env.CLOUD_BUILD,
 } as const
 
-export type $Config = typeof $config
+// Undefined import.meta.env variables are typed as `any`, but we want them to be `string | undefined`.
+export type $Config = {
+  [K in keyof typeof $config]: unknown extends (typeof $config)[K] ? string | undefined
+  : (typeof $config)[K]
+}
 
 Object.defineProperty(window, '$config', {
   writable: false,
@@ -33,8 +37,3 @@ Object.defineProperty(window, '$config', {
   enumerable: false,
   value: $config,
 })
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-interface ImportMetaEnv {
-  [key: string]: string
-}

app/gui/src/dashboard/hooks/gtagHooks.ts

@@ -15,7 +15,7 @@ window.dataLayer = window.dataLayer || []
 
 /** Google Analytics tag function. */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function gtag(action: 'config' | 'event' | 'js' | 'set', ...args: unknown[]) {
+export function gtag(action: 'config' | 'event' | 'js' | 'set', ...args: unknown[]) {
   // @ts-expect-error This is explicitly not given types as it is a mistake to acess this
   // anywhere else.
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
@@ -23,7 +23,7 @@ function gtag(action: 'config' | 'event' | 'js' | 'set', ...args: unknown[]) {
 }
 
 /** Send event to Google Analytics. */
-function event(name: string, params?: object) {
+export function event(name: string, params?: object) {
   gtag('event', name, params)
 }
 

app/gui/src/dashboard/providers/AuthProvider.tsx

@@ -14,7 +14,6 @@ import * as toast from 'react-toastify'
 import invariant from 'tiny-invariant'
 
 import * as detect from 'enso-common/src/detect'
-import * as gtag from 'enso-common/src/gtag'
 
 import * as appUtils from '#/appUtils'
 
@@ -204,7 +203,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   // This component cannot use `useGtagEvent` because `useGtagEvent` depends on the React Context
   // defined by this component.
   const gtagEvent = React.useCallback((name: string, params?: object) => {
-    gtag.event(name, params)
+    gtagHooks.event(name, params)
   }, [])
 
   const performLogout = async () => {
@@ -487,7 +486,7 @@ export default function AuthProvider(props: AuthProviderProps) {
   }, [userData])
 
   React.useEffect(() => {
-    gtag.gtag('set', { platform: detect.platform(), architecture: detect.architecture() })
+    gtagHooks.gtag('set', { platform: detect.platform(), architecture: detect.architecture() })
     return gtagHooks.gtagOpenCloseCallback(gtagEvent, 'open_app', 'close_app')
   }, [gtagEvent])
 

package.json

@@ -35,6 +35,7 @@
     "ci:lint": "corepack pnpm run -r lint",
     "ci:test": "corepack pnpm run -r --parallel test",
     "ci:typecheck": "corepack pnpm run -r typecheck",
+    "git-clean": "git clean -xfd --exclude='.env*'",
     "postinstall": "bazel run //:write_all"
   },
   "pnpm": {

pnpm-lock.yaml

@@ -470,6 +470,9 @@ importers:
       d3:
         specifier: ^7.4.0
         version: 7.9.0
+      dotenv:
+        specifier: ^9.0.2
+        version: 9.0.2
       enso-support:
         specifier: git://github.com/enso-org/enso-bot
         version: https://codeload.github.com/enso-org/enso-bot/tar.gz/aa903b6e639a31930ee4fff55c5639e4471fa48d