read env variables from env.json if there

Author: Amy Chen

public/env.json

@@ -0,0 +1,3 @@
+{
+    "test": "HELLO"
+}

src/FhirClientProvider.js

@@ -3,7 +3,7 @@ import FHIR from "fhirclient";
 import Stack from "@mui/material/Stack";
 import CircularProgress from "@mui/material/CircularProgress";
 import { FhirClientContext } from "./FhirClientContext";
-import { queryPatientIdKey } from "./util/util";
+import { fetchEnvData, getEnvs, queryPatientIdKey } from "./util/util";
 import ErrorComponent from "./components/ErrorComponent";
 
 export default function FhirClientProvider(props) {
@@ -27,6 +27,10 @@ export default function FhirClientProvider(props) {
     });
   }, [client]);
 
+  useEffect(() => {
+    fetchEnvData();
+    console.log("environment variables ", getEnvs());
+  }, []);
   useEffect(() => {
     FHIR.oauth2.ready().then(
       (client) => {

src/components/Launch.js

@@ -3,12 +3,14 @@ import FHIR from "fhirclient";
 import Stack from "@mui/material/Stack";
 import CircularProgress from "@mui/material/CircularProgress";
 import ErrorComponent from "./ErrorComponent";
-import { getEnv, queryPatientIdKey } from "../util/util.js";
+import { fetchEnvData, getEnv, queryPatientIdKey } from "../util/util.js";
 import "../style/App.scss";
 
 export default function Launch() {
   const [error, setError] = React.useState("");
 
+  React.useEffect(() => fetchEnvData(), []);
+
   React.useEffect(() => {
     let authURL = "launch-context.json";
     const backendURL = getEnv("REACT_APP_BACKEND_URL");

src/util/util.js

@@ -23,9 +23,69 @@ export function getFHIRResourcePaths(patientId) {
   });
 }
 
-export const getEnv = (key) => {
-  if (!process || !process.env) return "";
-  return process.env[key];
-};
+export function fetchEnvData() {
+  if (window["appConfig"] && Object.keys(window["appConfig"]).length) {
+    console.log("Window config variables added. ");
+    return;
+  }
+  const setConfig = function () {
+    if (!xhr.readyState === xhr.DONE) {
+      return;
+    }
+    if (xhr.status !== 200) {
+      console.log("Request failed! ");
+      return;
+    }
+    var envObj = JSON.parse(xhr.responseText);
+    window["appConfig"] = {};
+    //assign window process env variables for access by app
+    //won't be overridden when Node initializing env variables
+    for (var key in envObj) {
+      if (!window["appConfig"][key]) {
+        window["appConfig"][key] = envObj[key];
+      }
+    }
+  };
+  var xhr = new XMLHttpRequest();
+  xhr.open("GET", "/env.json", false);
+  xhr.onreadystatechange = function () {
+    //in the event of a communication error (such as the server going down),
+    //or error happens when parsing data
+    //an exception will be thrown in the onreadystatechange method when accessing the response properties, e.g. status.
+    try {
+      setConfig();
+    } catch (e) {
+      console.log("Caught exception " + e);
+    }
+  };
+  try {
+    xhr.send();
+  } catch (e) {
+    console.log("Request failed to send.  Error: ", e);
+  }
+  xhr.ontimeout = function (e) {
+    // XMLHttpRequest timed out.
+    console.log("request to fetch env.json file timed out ", e);
+  };
+}
+
+export function getEnv(key) {
+  //window application global variables
+  if (window["appConfig"] && window["appConfig"][key])
+    return window["appConfig"][key];
+  const envDefined = typeof process !== "undefined" && process.env;
+  //enviroment variables as defined in Node
+  if (envDefined && process.env[key]) return process.env[key];
+  return "";
+}
+
+export function getEnvs() {
+  const appConfig = window["appConfig"] ? window["appConfig"] : {};
+  const processEnvs = process.env ? process.env : {};
+  return {
+    ...appConfig,
+    ...processEnvs,
+  };
+}
 
 export const queryPatientIdKey = 'launch_queryPatientId';