refactor(app): Client-side configuration bundling (#2036)

Author: koistya

.github/workflows/pull_request.yml

@@ -7,6 +7,7 @@ on: [pull_request]
 
 env:
   VERSION: ${{ github.event.pull_request.number }}
+  HUSKY: 0
 
 jobs:
   build:

app/core/config.ts

@@ -0,0 +1,27 @@
+/* SPDX-FileCopyrightText: 2014-present Kriasoft */
+/* SPDX-License-Identifier: MIT */
+
+export type EnvName = "prod" | "test" | "local";
+export type Config = {
+  app: {
+    env: EnvName;
+    name: string;
+    origin: string;
+    hostname: string;
+  };
+  firebase: {
+    projectId: string;
+    appId: string;
+    apiKey: string;
+    authDomain: string;
+    measurementId: string;
+  };
+};
+
+export const configs = JSON.parse(import.meta.env.VITE_CONFIG);
+export const config: Config =
+  location.hostname === configs.prod.hostname
+    ? configs.prod
+    : location.hostname === configs.test.hostname
+    ? configs.test
+    : configs.local;

app/core/firebase.ts

@@ -14,17 +14,11 @@ import {
   type Auth,
   type UserCredential,
 } from "firebase/auth";
+import { config } from "./config.js";
 export { AuthErrorCodes, linkWithCredential } from "firebase/auth";
 export { FirebaseError };
 
-export const app = initializeApp({
-  projectId: import.meta.env.VITE_GOOGLE_CLOUD_PROJECT,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID,
-  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-  measurementId: import.meta.env.VITE_GA_MEASUREMENT_ID,
-});
-
+export const app = initializeApp(config.firebase);
 export const auth = getAuth(app);
 export const analytics = getAnalytics(app);
 

app/core/page.ts

@@ -4,6 +4,7 @@
 import { getAnalytics, logEvent } from "firebase/analytics";
 import * as React from "react";
 import { useLocation } from "react-router-dom";
+import { config } from "./config.js";
 
 export function usePageEffect(
   options?: Options,
@@ -17,10 +18,10 @@ export function usePageEffect(
 
     document.title =
       location.pathname === "/"
-        ? options?.title ?? import.meta.env.VITE_APP_NAME
+        ? options?.title ?? config.app.name
         : options?.title
-        ? `${options.title} - ${import.meta.env.VITE_APP_NAME}`
-        : import.meta.env.VITE_APP_NAME;
+        ? `${options.title} - ${config.app.name}`
+        : config.app.name;
 
     return function () {
       document.title = previousTitle;
@@ -36,7 +37,7 @@ export function usePageEffect(
   React.useEffect(() => {
     if (!(options?.trackPageView === false)) {
       logEvent(getAnalytics(), "page_view", {
-        page_title: options?.title ?? import.meta.env.VITE_APP_NAME,
+        page_title: options?.title ?? config.app.name,
         page_path: `${location.pathname}${location.search}`,
       });
     }

app/global.d.ts

@@ -1,14 +1,22 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-declare const APP_NAME: string;
-declare const APP_HOSTNAME: string;
-declare const GOOGLE_CLOUD_PROJECT: string;
-declare const FIREBASE_APP_ID: string;
-declare const FIREBASE_API_KEY: string;
-declare const FIREBASE_AUTH_DOMAIN: string;
-declare const GA_MEASUREMENT_ID: string;
-
 interface Window {
   dataLayer: unknown[];
 }
+
+interface ImportMetaEnv {
+  /**
+   * Client-side configuration for the production, test/QA, and local
+   * development environments. See `core/config.ts`, `vite.config.ts`.
+   */
+  readonly VITE_CONFIG: string;
+}
+
+declare module "relay-runtime" {
+  interface PayloadError {
+    errors?: Record<string, string[] | undefined>;
+  }
+}
+
+declare module "*.css";

app/layout/components/Logo.tsx

@@ -2,6 +2,7 @@
 /* SPDX-License-Identifier: MIT */
 
 import { Typography, TypographyProps } from "@mui/material";
+import { config } from "../../core/config.js";
 
 export function Logo(props: TypographyProps): JSX.Element {
   const { sx, ...other } = props;
@@ -18,7 +19,7 @@ export function Logo(props: TypographyProps): JSX.Element {
       variant="h1"
       {...other}
     >
-      {import.meta.env.VITE_APP_NAME}
+      {config.app.name}
     </Typography>
   );
 }

app/package.json

@@ -41,8 +41,5 @@
     "typescript": "^4.9.5",
     "vite": "^4.1.4",
     "vitest": "^0.28.5"
-  },
-  "envars": {
-    "cwd": "../env"
   }
 }

app/routes/auth/Notice.tsx

@@ -2,6 +2,7 @@
 /* SPDX-License-Identifier: MIT */
 
 import { Link, Typography, TypographyProps } from "@mui/material";
+import { config } from "../../core/config.js";
 
 export function Notice(props: NoticeProps): JSX.Element {
   const { sx, ...other } = props;
@@ -20,7 +21,7 @@ export function Notice(props: NoticeProps): JSX.Element {
     >
       <span>
         By clicking Continue above, your acknowledge that your have read and
-        understood, and agree to {import.meta.env.VITE_APP_NAME}&apos;s
+        understood, and agree to {config.app.name}&apos;s
       </span>{" "}
       <Link color="inherit" href="/terms">
         Terms & Conditions

app/routes/legal/Privacy.tsx

@@ -2,18 +2,19 @@
 /* SPDX-License-Identifier: MIT */
 
 import { Container, Link, Typography } from "@mui/material";
+import { config } from "../../core/config.js";
 import { usePageEffect } from "../../core/page.js";
 
-const appName = import.meta.env.VITE_APP_NAME;
-const appOrigin = `https://${import.meta.env.VITE_APP_HOSTNAME}`;
-const email = `support@${import.meta.env.VITE_APP_HOSTNAME}`;
-
 /**
  * Generated by https://getterms.io
  */
 export default function Privacy(): JSX.Element {
   usePageEffect({ title: "Privacy Policy" });
 
+  const appName = config.app.name;
+  const appOrigin = config.app.origin;
+  const email = `hello@${config.app.hostname}`;
+
   return (
     <Container
       maxWidth="sm"

app/routes/legal/Terms.tsx

@@ -2,17 +2,18 @@
 /* SPDX-License-Identifier: MIT */
 
 import { Container, Link, Typography } from "@mui/material";
+import { config } from "../../core/config.js";
 import { usePageEffect } from "../../core/page.js";
 
-const appName = import.meta.env.VITE_APP_NAME;
-const appOrigin = `https://${import.meta.env.VITE_APP_HOSTNAME}`;
-
 /**
  * Generated by https://getterms.io
  */
 export default function Terms(): JSX.Element {
   usePageEffect({ title: "Terms of Use" });
 
+  const appName = config.app.name;
+  const appOrigin = config.app.origin;
+
   return (
     <Container
       maxWidth="sm"

app/tsconfig.node.json

@@ -3,9 +3,10 @@
   "compilerOptions": {
     "composite": true,
     "moduleResolution": "Node",
+    "types": ["vite/client"],
     "allowSyntheticDefaultImports": true,
     "outDir": "../.cache/typescript-app",
     "emitDeclarationOnly": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "core/config.ts"]
 }

app/vite.config.ts

@@ -3,24 +3,39 @@
 
 import react from "@vitejs/plugin-react";
 import envars from "envars";
+import { URL } from "node:url";
 import { defineConfig } from "vitest/config";
+import { Config, EnvName } from "./core/config.js";
 
-// Load environment variables for the target environment
-envars.config();
+// The list of supported environments
+const envNames: EnvName[] = ["prod", "test", "local"];
 
-// Tells Vite which environment variables need to be injected into the app
+// Bootstrap client-side configuration from environment variables
+const configs = envNames.map((envName): [EnvName, Config] => {
+  const env = envars.config({ env: envName, cwd: "../env" });
+  return [
+    envName,
+    {
+      app: {
+        env: envName,
+        name: env.APP_NAME,
+        origin: env.APP_ORIGIN,
+        hostname: new URL(env.APP_ORIGIN).hostname,
+      },
+      firebase: {
+        projectId: env.GOOGLE_CLOUD_PROJECT,
+        appId: env.FIREBASE_APP_ID,
+        apiKey: env.FIREBASE_API_KEY,
+        authDomain: env.FIREBASE_AUTH_DOMAIN,
+        measurementId: env.GA_MEASUREMENT_ID,
+      },
+    },
+  ];
+});
+
+// Pass client-side configuration to the web app
 // https://vitejs.dev/guide/env-and-mode.html#env-variables-and-modes
-[
-  "APP_ENV",
-  "APP_NAME",
-  "APP_ORIGIN",
-  "APP_HOSTNAME",
-  "GOOGLE_CLOUD_PROJECT",
-  "FIREBASE_APP_ID",
-  "FIREBASE_API_KEY",
-  "FIREBASE_AUTH_DOMAIN",
-  "GA_MEASUREMENT_ID",
-].forEach((key) => (process.env[`VITE_${key}`] = process.env[key]));
+process.env.VITE_CONFIG = JSON.stringify(Object.fromEntries(configs));
 
 /**
  * Vite configuration