From e8bb95cb35ed1b02a85cf7cbea5bfc20fe0324c2 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 5 May 2021 14:50:38 +0200
Subject: build: Support runtime variables in frontend Docker image

This change adds support for dynamically specifying various variables
for the frontend Docker image through environmental variables.
Previously, these were embedded directly into the source code, which
requires rebuilding the entire image to change these variables.
---
 opendc-web/opendc-web-ui/src/api/routes/token-signin.js | 2 +-
 opendc-web/opendc-web-ui/src/api/socket.js              | 2 +-
 opendc-web/opendc-web-ui/src/containers/auth/Login.js   | 6 +++---
 opendc-web/opendc-web-ui/src/index.js                   | 5 +++--
 4 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src')

diff --git a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
index d6cff570..e40127f2 100644
--- a/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
+++ b/opendc-web/opendc-web-ui/src/api/routes/token-signin.js
@@ -1,5 +1,5 @@
 export function performTokenSignIn(token) {
-    const apiUrl = process.env.REACT_APP_API_BASE_URL || ''
+    const apiUrl = window.$$env['API_BASE_URL'] || ''
 
     return fetch(`${apiUrl}/tokensignin`, {
         method: 'POST',
diff --git a/opendc-web/opendc-web-ui/src/api/socket.js b/opendc-web/opendc-web-ui/src/api/socket.js
index 1c432167..884c4152 100644
--- a/opendc-web/opendc-web-ui/src/api/socket.js
+++ b/opendc-web/opendc-web-ui/src/api/socket.js
@@ -7,7 +7,7 @@ const callbacks = {}
 
 export function setupSocketConnection(onConnect) {
     const apiUrl =
-        process.env.REACT_APP_API_BASE_URL ||
+        window.$$env['API_BASE_URL'] ||
         `${window.location.protocol}//${window.location.hostname}:${window.location.port}`
 
     socket = io.connect(apiUrl)
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
index 2f9726bf..9201c09a 100644
--- a/opendc-web/opendc-web-ui/src/containers/auth/Login.js
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -32,15 +32,15 @@ class LoginContainer extends React.Component {
 
         return (
             <GoogleLogin
-                clientId={process.env.REACT_APP_OAUTH_CLIENT_ID}
+                clientId={window.$$env['OAUTH_CLIENT_ID']}
                 onSuccess={this.onAuthResponse.bind(this)}
                 onFailure={this.onAuthFailure.bind(this)}
                 render={(renderProps) => (
                     <span onClick={renderProps.onClick} className="login btn btn-primary">
-                        <span className="fa fa-google" /> Login with Google
+                        <span className="fa fa-google"/> Login with Google
                     </span>
                 )}
-            ></GoogleLogin>
+            />
         )
     }
 }
diff --git a/opendc-web/opendc-web-ui/src/index.js b/opendc-web/opendc-web-ui/src/index.js
index 3517147e..bddf0b0e 100644
--- a/opendc-web/opendc-web-ui/src/index.js
+++ b/opendc-web/opendc-web-ui/src/index.js
@@ -12,10 +12,11 @@ setupSocketConnection(() => {
     const store = configureStore()
 
     // Initialize Sentry if the user has configured a DSN
-    if (process.env.REACT_APP_SENTRY_DSN) {
+    const dsn = window.$$env['SENTRY_DSN']
+    if (dsn) {
         Sentry.init({
             environment: process.env.NODE_ENV,
-            dsn: process.env.REACT_APP_SENTRY_DSN,
+            dsn: dsn,
             integrations: [new Integrations.BrowserTracing()],
             tracesSampleRate: 0.1,
         })
-- 
cgit v1.2.3