External config file (#31)

so it can later be replaced with a volume at runtime for the built container

Author: FayKn

cryptify-front-end/public/config.js

@@ -0,0 +1,5 @@
+// runtime configuration for the frontend so it can easily be configured on a prebuilt container
+window.__APP_CONFIG__ = {
+    BACKEND_URL: "https://cryptify.nl/api/v2",
+    PKG_URL: "https://postguard-stable.cs.ru.nl/pkg",
+};

cryptify-front-end/public/index.html

@@ -20,6 +20,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="config.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

cryptify-front-end/src/Constants.tsx

@@ -1,4 +1,11 @@
-import { browserName, browserVersion, isMobile } from "react-device-detect";
+import {browserName, browserVersion, isMobile} from "react-device-detect";
+
+type ConfigFile = {
+    PKG_URL?: string;
+    BACKEND_URL?: string;
+};
+const rawConfig: unknown = (window as any).__APP_CONFIG__;
+const configFile: ConfigFile = rawConfig && typeof rawConfig === "object" ? (rawConfig as ConfigFile) : {};
 
 // 2GB
 export const MAX_UPLOAD_SIZE: number = 2 * 1000 * 1000 * 1000;
@@ -10,18 +17,16 @@ export const UPLOAD_CHUNK_SIZE: number = 1024 * 1024;
 // progress bar smooth time in seconds.
 export const SMOOTH_TIME: number = 2;
 
-const isStable = process.env.REACT_APP_ENV === "stable";
-
-export const PKG_URL = `https://postguard-${process.env.REACT_APP_ENV}.cs.ru.nl/pkg`
+export const PKG_URL = configFile.PKG_URL ?? `https://postguard-${process.env.REACT_APP_ENV}.cs.ru.nl/pkg`
 
 // Stable: https://cryptify.nl/api/v2
 // Main: https://cryptify.nl/main/api/v2
-export const BACKEND_URL = isStable ? "https://cryptify.nl/api/v2" : "https://cryptify.nl/main/api/v2";
+export const BACKEND_URL = configFile.BACKEND_URL ?? "https://cryptify.nl/api/v2";
 
 export const METRICS_HEADER = {
-  "X-PostGuard-Client-Version": `${browserName}${
-    isMobile ? "(mobile)" : ""
-  },${browserVersion},${process.env.REACT_APP_NAME},${
-    process.env.REACT_APP_VERSION
-  }`,
+    "X-PostGuard-Client-Version": `${browserName}${
+        isMobile ? "(mobile)" : ""
+    },${browserVersion},${process.env.REACT_APP_NAME},${
+        process.env.REACT_APP_VERSION
+    }`,
 };

frontend.Dockerfile

@@ -16,6 +16,7 @@ RUN npm install --legacy-peer-deps
 RUN npm run build-stable
 
 FROM nginx:alpine
+
 COPY --from=builder /app/build /var/www/html
 COPY --from=builder /app/nginx.conf /etc/nginx/nginx.conf