Add support for injecting configuration at runtime

frontend/.env

+REACT_APP_VERSION=$npm_package_version
+REACT_APP_NAME=$npm_package_name

frontend/docker-entrypoint.sh

+#!/usr/bin/env sh
+set -eu
+
+ENV_JSON=$(env | grep '^REACT_APP_*' | jq -c '. | split("\n") | map(select(. != "")) | map(split("=") | { (.[0]) : .[1] }) | reduce .[] as $item ({}; . * $item)' -R -s)
+echo "window.ENV = $ENV_JSON" > /app/build/env.js
+
+exec "$@"

frontend/package.json

@@ -17,8 +17,9 @@
     "web-vitals": "^1.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "NODE_ENV=development HOST=0.0.0.0 npm run build:env && react-scripts start",
+    "build": "npm run build:env && react-scripts build",
+    "build:env": "node scripts/build-env.js",
     "clean": "rm -rf node_modules",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/public/env.js

+window.ENV = {"NODE_ENV":"development","PUBLIC_URL":"","FAST_REFRESH":true,"REACT_APP_VERSION":"0.1.0","REACT_APP_NAME":"greg"}
\ No newline at end of file

frontend/scripts/build-env.js

+const dotenv = require("dotenv");
+dotenv.config();
+const fs = require("fs");
+const clientEnv = require("react-scripts/config/env.js")(
+  process.env.PUBLIC_URL || ""
+);
+
+const outFile = `./public/env.js`;
+const content = `window.ENV = ${JSON.stringify(clientEnv.raw)}`;
+
+try {
+  fs.writeFileSync(outFile, content, "utf8");
+  console.log("Wrote client environment to", outFile);
+} catch (err) {
+  console.error("Error while writing client environment file:", err.message);
+  process.exit(1);
+}

frontend/src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
 
-function App() {
+import { appTimezone, appVersion, appTheme } from "./appConfig";
+
+const App = () => {
   return (
     <div className="App">
       <header className="App-header">
@@ -18,9 +20,17 @@ function App() {
         >
           Learn React
         </a>
+        <p>
+          Version {appVersion}
+          <br />
+          Timezone {appTimezone}
+          <br />
+          Theme {appTheme}
+          <br />
+        </p>
       </header>
     </div>
   );
-}
+};
 
 export default App;

frontend/src/appConfig.ts

+declare global {
+  /* tslint:disable */
+  interface Window {
+    ENV: any;
+  }
+}
+
+/* Locate the client environment */
+const isProduction = process.env.NODE_ENV === "production";
+const env = isProduction ? window.ENV : process.env;
+
+/* General settings */
+export const appTimezone: string = "Europe/Oslo";
+
+/* Version */
+export const appVersion: string = process.env.REACT_APP_VERSION as string;
+export const appName: string = process.env.REACT_APP_NAME as string;
+
+/* Theming */
+export const appTheme: string = env.REACT_APP_THEME
+  ? (env.REACT_APP_THEME as string)
+  : "default";