Possible Breaking changes, will revert if next image fails to run. Dynamically builds env variables to file to be used by frontend

backend/classes/env.js

@@ -0,0 +1,29 @@
+const fs = require("fs");
+const path = require("path");
+
+async function writeEnvVariables() {
+  // Fetch environment variables that start with JS_
+  const envVariables = Object.keys(process.env).reduce((acc, key) => {
+    if (key.startsWith("JS_")) {
+      acc[key] = process.env[key];
+    }
+    return acc;
+  }, {});
+
+  // Convert the environment variables to a JavaScript object string
+  const envContent = `window.env = ${JSON.stringify(envVariables, null, 2)};`;
+
+  // Define the output file path
+  const outputPath = path.join(__dirname, "..", "..", "dist", "env.js");
+
+  // Write the environment variables to the file
+  fs.writeFile(outputPath, envContent, "utf8", (err) => {
+    if (err) {
+      console.error("Error writing env.js file:", err);
+    } else {
+      console.log("env.js file has been saved successfully.");
+    }
+  });
+}
+
+module.exports = writeEnvVariables;

backend/server.js

@@ -31,6 +31,7 @@ const tasks = require("./tasks/tasks");
 
 // websocket
 const { setupWebSocketServer } = require("./ws");
+const writeEnvVariables = require("./classes/env");
 
 const app = express();
 const db = knex(knexConfig.development);
@@ -97,10 +98,12 @@ app.use("/utils", authenticate, utilsRouter, () => {
 app.use("/swagger", swaggerUi.serve, swaggerUi.setup(swaggerDocument));
 
 // for deployment of static page
-const root = path.join(__dirname, "..", "dist");
-app.use(express.static(root));
-app.get("*", (req, res) => {
-  res.sendFile(path.join(__dirname, "..", "dist", "index.html"));
+writeEnvVariables().then(() => {
+  const root = path.join(__dirname, "..", "dist");
+  app.use(express.static(root));
+  app.get("*", (req, res) => {
+    res.sendFile(path.join(__dirname, "..", "dist", "index.html"));
+  });
 });
 
 // JWT middleware

index.html

@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Jellyfin stats for the masses" />
     <link rel="apple-touch-icon" href="/icon-b-192.png" />
+    <script src="/env.js"></script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/index.jsx

@@ -15,7 +15,7 @@ import { initReactI18next } from "react-i18next";
 import Loading from "./pages/components/general/loading.jsx";
 import routes from "./routes.jsx";
 
-const baseUrl = import.meta.env.JS_BASE_URL ?? "/";
+const baseUrl = window.env.JS_BASE_URL ?? import.meta.env.JS_BASE_URL ?? "/";
 let validBaseUrls = [...new Set([baseUrl, ...routes.map((route) => "/" + route.path.split("/")[1])])];
 if (baseUrl != "/") {
   validBaseUrls = validBaseUrls.filter((url) => url != "/");
@@ -47,7 +47,7 @@ i18n
     ReactDOM.createRoot(document.getElementById("root")).render(
       <React.StrictMode>
         <Suspense fallback={<Loading />} />
-        <BrowserRouter basename={import.meta.env.JS_BASE_URL ?? "/"}>
+        <BrowserRouter basename={baseUrl}>
           <App />
         </BrowserRouter>
       </React.StrictMode>

src/pages/components/activity/activity-table.jsx

@@ -155,8 +155,8 @@ export default function ActivityTable(props) {
         row = row.original;
         if (
           isRemoteSession(row.RemoteEndPoint) &&
-          import.meta.env.JS_GEOLITE_ACCOUNT_ID &&
-          import.meta.env.JS_GEOLITE_LICENSE_KEY
+          (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) &&
+          (window.env.JS_GEOLITE_LICENSE_KEY ?? import.meta.env.JS_GEOLITE_LICENSE_KEY)
         ) {
           return (
             <Link className="text-decoration-none" onClick={() => showIPDataModal(row.RemoteEndPoint)}>

src/pages/components/sessions/session-card.jsx

@@ -164,8 +164,8 @@ function SessionCard(props) {
                     <Row>
                       <Col className="col-auto ellipse">
                         {isRemoteSession(props.data.session.RemoteEndPoint) &&
-                        import.meta.env.JS_GEOLITE_ACCOUNT_ID &&
-                        import.meta.env.JS_GEOLITE_LICENSE_KEY ? (
+                        (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) &&
+                        (window.env.JS_GEOLITE_LICENSE_KEY ?? import.meta.env.JS_GEOLITE_LICENSE_KEY) ? (
                           <Link
                             className="text-decoration-none text-white"
                             onClick={() => showIPDataModal(props.data.session.RemoteEndPoint)}

src/pages/debugTools/session-card.jsx

@@ -169,8 +169,8 @@ function SessionCard(props) {
                     <Row>
                       <Col className="col-auto ellipse">
                         {isRemoteSession(props.data.session.RemoteEndPoint) &&
-                        import.meta.env.JS_GEOLITE_ACCOUNT_ID &&
-                        import.meta.env.JS_GEOLITE_LICENSE_KEY ? (
+                        (window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) &&
+                        (window.env.JS_GEOLITE_LICENSE_KEY ?? import.meta.env.JS_GEOLITE_LICENSE_KEY) ? (
                           <Card.Text></Card.Text>
                         ) : (
                           <span>IP Address: {props.data.session.RemoteEndPoint}</span>