set env variables in index.html

HiEventsDev · Apr 26, 2024 · 5ebcbf2 · 5ebcbf2
1 parent 9801898
commit 5ebcbf2
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 11 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -9,6 +9,7 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--render-helmet--><title>Hi.Events</title><!--/render-helmet-->
+    <!--environment-variables-->
   </head>
   <body >
     <div id="app"><!--app-html--></div>

diff --git a/frontend/server.js b/frontend/server.js
@@ -43,6 +43,16 @@ if (!isProduction) {
     app.use(base, sirv("./dist/client", {extensions: []}));
 }
 
+const getViteEnvironmentVariables = () => {
+    const envVars = {};
+    for (const key in process.env) {
+        if (key.startsWith('VITE_')) {
+            envVars[key] = process.env[key];
+        }
+    }
+    return JSON.stringify(envVars);
+};
+
 app.use("*", async (req, res) => {
     const url = req.originalUrl.replace(base, "");
 
@@ -69,12 +79,12 @@ app.use("*", async (req, res) => {
             .map((value) => value.toString() || "")
             .join(" ");
 
+        const envVariablesHtml = `<script>window.hievents = ${getViteEnvironmentVariables()};</script>`;
+
         const html = template
             .replace("<!--app-html-->", appHtml)
-            .replace(
-                "<!--dehydrated-state-->",
-                `<script>window.__REHYDRATED_STATE__ = ${strifiedState}</script>`
-            )
+            .replace("<!--dehydrated-state-->", `<script>window.__REHYDRATED_STATE__ = ${strifiedState}</script>`)
+            .replace("<!--environment-variables-->", envVariablesHtml)
             .replace(/<!--render-helmet-->.*?<!--\/render-helmet-->/s, helmetHtml);
 
         res.setHeader("Content-Type", "text/html");

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -14,7 +14,6 @@ import "@mantine/tiptap/styles.css";
 import "@mantine/dropzone/styles.css";
 import "@mantine/charts/styles.css";
 import "./styles/global.scss";
-
 // @ts-ignore
 import {messages as en} from "./locales/en.po";
 // @ts-ignore
@@ -27,6 +26,12 @@ import {messages as pt} from "./locales/pt.po";
 import {messages as es} from "./locales/es.po";
 import {setAuthToken} from "./utilites/apiClient.ts";
 
+declare global {
+    interface Window {
+        hievents: Record<string, string>;
+    }
+}
+
 const supportedLocales: Record<string, any> = {
     en,
     de,

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
@@ -1,8 +1,11 @@
 import axios from "axios";
 import {setAuthToken} from "../utilites/apiClient.ts";
 import {isSsr} from "../utilites/helpers.ts";
+import {getConfig} from "../utilites/config.ts";
 
-const BASE_URL = isSsr() ? import.meta.env.VITE_API_URL_SERVER : import.meta.env.VITE_API_URL_CLIENT;
+const BASE_URL = isSsr()
+    ? getConfig('VITE_API_URL_SERVER')
+    : getConfig('VITE_API_URL_CLIENT');
 const LOGIN_PATH = "/auth/login";
 const PREVIOUS_URL_KEY = 'previous_url'; // Key for storing the previous URL
 

diff --git a/frontend/src/api/public-client.ts b/frontend/src/api/public-client.ts
@@ -1,10 +1,11 @@
 import axios from "axios";
 import {isSsr} from "../utilites/helpers.ts";
+import {getConfig} from "../utilites/config.ts";
 
 const BASE_URL =
-    (isSsr()
-        ? import.meta.env.VITE_API_URL_SERVER
-        : import.meta.env.VITE_API_URL_CLIENT) + '/public';
+    isSsr()
+        ? getConfig('VITE_API_URL_SERVER')
+        : getConfig('VITE_API_URL_CLIENT') + '/public';
 
 export const publicApi = axios.create({
     baseURL: BASE_URL,

diff --git a/frontend/src/components/routes/ticket-widget/Payment/index.tsx b/frontend/src/components/routes/ticket-widget/Payment/index.tsx
@@ -10,6 +10,7 @@ import {t} from "@lingui/macro";
 import {eventHomepagePath} from "../../../../utilites/urlHelper.ts";
 import {useGetEventPublic} from "../../../../queries/useGetEventPublic.ts";
 import {HomepageInfoMessage} from "../../../common/HomepageInfoMessage";
+import {getConfig} from "../../../../utilites/config.ts";
 
 const Payment = () => {
     const {eventId, orderShortId} = useParams();
@@ -31,7 +32,7 @@ const Payment = () => {
             stripeAccount: stripeAccount
         } : {};
 
-        setStripePromise(loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY, options));
+        setStripePromise(loadStripe(getConfig('VITE_STRIPE_PUBLISHABLE_KEY') as string, options));
     }, [stripeData]);
 
     if (stripePaymentIntentError && event) {

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -2,6 +2,11 @@
  * @todo - This file needs to be organized better. Split into multiple files.
  */
 
+export type ConfigKeys = 'VITE_FRONTEND_URL'
+    | 'VITE_API_URL_CLIENT'
+    | 'VITE_STRIPE_PUBLISHABLE_KEY'
+    | 'VITE_API_URL_SERVER';
+
 export type IdParam = string | undefined | number;
 
 export interface AcceptInvitationRequest {

diff --git a/frontend/src/utilites/config.ts b/frontend/src/utilites/config.ts
@@ -0,0 +1,9 @@
+import {ConfigKeys} from "../types.ts";
+
+export const getConfig = (key: ConfigKeys): string | undefined => {
+    if (typeof window === "undefined") {
+        return import.meta.env[key] as string | undefined;
+    }
+
+    return window.hievents[key];
+}
diff --git a/frontend/src/utilites/urlHelper.ts b/frontend/src/utilites/urlHelper.ts
@@ -1,4 +1,5 @@
 import {Event, IdParam} from "../types.ts";
+import {getConfig} from "./config.ts";
 
 export const eventCheckoutPath = (eventId: IdParam, orderShortId: IdParam, subPage = '') => {
     return `/checkout/${eventId}/${orderShortId}/${subPage}`;
@@ -9,7 +10,7 @@ export const eventHomepagePath = (event: Event) => {
 }
 
 export const eventHomepageUrl = (event: Event) => {
-    return import.meta.env.VITE_FRONTEND_URL + eventHomepagePath(event);
+    return getConfig('VITE_FRONTEND_URL') + eventHomepagePath(event);
 }
 
 export const eventCoverImageUrl = (event: Event) => {