refactor: add support for runtime environment variable in built app

4 years ago · 9a26e6248a
11 changed files with 73 additions and 8 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -8,6 +8,8 @@ docker/
 !docker/concordia-contracts/test-contracts.sh
 !docker/concordia-app/test-app.sh
 !docker/concordia-app/nginx.conf
+!docker/concordia-app/create-environment.sh
+!docker/concordia-app/run.sh
 !docker/ganache/start-blockchain.sh

 packages/*/node_modules
--- a/docker/concordia-app/Dockerfile
+++ b/docker/concordia-app/Dockerfile
@ -82,7 +82,16 @@ RUN apk add -U tzdata \
    && apk del tzdata \
    && rm -rf /var/cache/apk/*

-WORKDIR "/var/www/concordia-app"
+COPY ./docker/concordia-app/create-environment.sh /opt/concordia/create-environment.sh
+COPY ./docker/concordia-app/run.sh /opt/concordia/run.sh
+
+RUN ["chmod", "+x", "/opt/concordia/create-environment.sh"]
+RUN ["chmod", "+x", "/opt/concordia/run.sh"]

 COPY ./docker/concordia-app/nginx.conf /etc/nginx/conf.d/default.conf
+
+WORKDIR "/var/www/concordia-app"
+
 COPY --chown=nginx:nginx --from=build /usr/src/concordia/packages/concordia-app/build .
+
+CMD ["/opt/concordia/run.sh"]
--- a/docker/concordia-app/create-environment.sh
+++ b/docker/concordia-app/create-environment.sh
@ -0,0 +1,14 @@
+#!/bin/sh
+
+echo "window.runtimeEnv = { \
+REACT_APP_CONCORDIA_HOST: \"${REACT_APP_CONCORDIA_HOST}\", \
+REACT_APP_CONCORDIA_PORT: \"${REACT_APP_CONCORDIA_PORT}\", \
+REACT_APP_WEB3_HOST: \"${REACT_APP_WEB3_HOST}\", \
+REACT_APP_WEB3_PORT: \"${REACT_APP_WEB3_PORT}\", \
+REACT_APP_RENDEZVOUS_HOST: \"${REACT_APP_RENDEZVOUS_HOST}\", \
+REACT_APP_RENDEZVOUS_PORT: \"${REACT_APP_RENDEZVOUS_PORT}\", \
+REACT_APP_USE_EXTERNAL_CONTRACTS_PROVIDER: \"${REACT_APP_USE_EXTERNAL_CONTRACTS_PROVIDER}\", \
+REACT_APP_CONTRACTS_PROVIDER_HOST: \"${REACT_APP_CONTRACTS_PROVIDER_HOST}\", \
+REACT_APP_CONTRACTS_PROVIDER_PORT: \"${REACT_APP_CONTRACTS_PROVIDER_PORT}\", \
+REACT_APP_CONTRACTS_VERSION_HASH: \"${REACT_APP_CONTRACTS_VERSION_HASH}\", \
+}" >/var/www/concordia-app/environment.js
--- a/docker/concordia-app/run.sh
+++ b/docker/concordia-app/run.sh
@ -0,0 +1,3 @@
+sh /opt/concordia/create-environment.sh
+
+exec "$(which nginx)" -g "daemon off;"
--- a/packages/concordia-app/public/index.html
+++ b/packages/concordia-app/public/index.html
@ -20,6 +20,10 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Concordia</title>
+    <!--
+      Allow access to runtime env vars after build.
+    -->
+    <script src="%PUBLIC_URL%/environment.js"></script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/packages/concordia-app/src/options/drizzleOptions.js
+++ b/packages/concordia-app/src/options/drizzleOptions.js
@ -12,7 +12,9 @@ const drizzleOptions = {
  reloadWindowOnAccountChange: true, // We need it to reinitialize breeze and create new Orbit databases
 };

-if (process.env.REACT_APP_USE_EXTERNAL_CONTRACTS_PROVIDER) {
+if (process.env.REACT_APP_USE_EXTERNAL_CONTRACTS_PROVIDER
+    || (window.runtimeEnv && window.runtimeEnv.REACT_APP_USE_EXTERNAL_CONTRACTS_PROVIDER)) {
+  console.log('Downloading contracts from external provider');
  drizzleOptions.contracts = downloadContractArtifactsSync();
 } else {
  drizzleOptions.contracts = contracts;
--- a/packages/concordia-app/src/utils/drizzleUtils.js
+++ b/packages/concordia-app/src/utils/drizzleUtils.js
@ -10,8 +10,12 @@ import {
 } from '../constants/configuration/defaults';

 function getContractsDownloadRequest() {
-  const HOST = process.env.REACT_APP_CONCORDIA_HOST || CONCORDIA_HOST_DEFAULT;
-  const PORT = process.env.REACT_APP_CONCORDIA_PORT || CONCORDIA_PORT_DEFAULT;
+  const HOST = process.env.REACT_APP_CONCORDIA_HOST
+      || (window.runtimeEnv && window.runtimeEnv.REACT_APP_CONCORDIA_HOST)
+      || CONCORDIA_HOST_DEFAULT;
+  const PORT = process.env.REACT_APP_CONCORDIA_PORT
+      || (window.runtimeEnv && window.runtimeEnv.REACT_APP_CONCORDIA_PORT)
+      || CONCORDIA_PORT_DEFAULT;

  const xhrRequest = new XMLHttpRequest();

--- a/packages/concordia-shared/src/environment/contractsProviderEnv.js
+++ b/packages/concordia-shared/src/environment/contractsProviderEnv.js
@ -1,10 +1,16 @@
 // Depending on the package user (app in contrast to any of the other packages) the env var names should either include
 // the REACT_APP_ prefix or not
+
+const runtimeEnv = typeof window !== 'undefined' && window.runtimeEnv;
+
 const contractsProviderHostEnv = process.env.REACT_APP_CONTRACTS_PROVIDER_HOST
+    || (runtimeEnv && runtimeEnv.REACT_APP_CONTRACTS_PROVIDER_HOST)
    || process.env.CONTRACTS_PROVIDER_HOST;
 const contractsProviderPortEnv = process.env.REACT_APP_CONTRACTS_PROVIDER_PORT
+    || (runtimeEnv && runtimeEnv.REACT_APP_CONTRACTS_PROVIDER_PORT)
    || process.env.CONTRACTS_PROVIDER_PORT;
 const contractsVersionHashEnv = process.env.REACT_APP_CONTRACTS_VERSION_HASH
+    || (runtimeEnv && runtimeEnv.REACT_APP_CONTRACTS_VERSION_HASH)
    || process.env.CONTRACTS_VERSION_HASH;

 module.exports = {
--- a/packages/concordia-shared/src/environment/pinnerEnv.js
+++ b/packages/concordia-shared/src/environment/pinnerEnv.js
@ -1,7 +1,14 @@
 // Depending on the package user (app in contrast to any of the other packages) the env var names should either include
 // the REACT_APP_ prefix or not
-const pinnerApiHostEnv = process.env.REACT_APP_PINNER_API_HOST || process.env.PINNER_API_HOST;
-const pinnerApiPortEnv = process.env.REACT_APP_PINNER_API_PORT || process.env.PINNER_API_PORT;
+
+const runtimeEnv = typeof window !== 'undefined' && window.runtimeEnv;
+
+const pinnerApiHostEnv = process.env.REACT_APP_PINNER_API_HOST
+    || (runtimeEnv && runtimeEnv.REACT_APP_PINNER_API_HOST)
+    || process.env.PINNER_API_HOST;
+const pinnerApiPortEnv = process.env.REACT_APP_PINNER_API_PORT
+    || (runtimeEnv && runtimeEnv.REACT_APP_PINNER_API_PORT)
+    || process.env.PINNER_API_PORT;

 module.exports = {
  pinnerApiHostEnv,
--- a/packages/concordia-shared/src/environment/rendezvousEnv.js
+++ b/packages/concordia-shared/src/environment/rendezvousEnv.js
@ -1,7 +1,14 @@
 // Depending on the package user (app in contrast to any of the other packages) the env var names should either include
 // the REACT_APP_ prefix or not
-const rendezvousHostEnv = process.env.REACT_APP_RENDEZVOUS_HOST || process.env.RENDEZVOUS_HOST;
-const rendezvousPortEnv = process.env.REACT_APP_RENDEZVOUS_PORT || process.env.RENDEZVOUS_PORT;
+
+const runtimeEnv = typeof window !== 'undefined' && window.runtimeEnv;
+
+const rendezvousHostEnv = process.env.REACT_APP_RENDEZVOUS_HOST
+    || (runtimeEnv && runtimeEnv.REACT_APP_RENDEZVOUS_HOST)
+    || process.env.RENDEZVOUS_HOST;
+const rendezvousPortEnv = process.env.REACT_APP_RENDEZVOUS_PORT
+    || (runtimeEnv && runtimeEnv.REACT_APP_RENDEZVOUS_PORT)
+    || process.env.RENDEZVOUS_PORT;

 module.exports = {
  rendezvousHostEnv,
--- a/packages/concordia-shared/src/environment/web3Env.js
+++ b/packages/concordia-shared/src/environment/web3Env.js
@ -1,8 +1,13 @@
 // Depending on the package user (app in contrast to any of the other packages) the env var names should either include
 // the REACT_APP_ prefix or not
+
+const runtimeEnv = typeof window !== 'undefined' && window.runtimeEnv;
+
 const web3HostEnv = process.env.REACT_APP_WEB3_HOST
+    || (runtimeEnv && runtimeEnv.REACT_APP_WEB3_HOST)
    || process.env.WEB3_HOST;
 const web3PortEnv = process.env.REACT_APP_WEB3_PORT
+    || (runtimeEnv && runtimeEnv.REACT_APP_WEB3_PORT)
    || process.env.WEB3_PORT;

 // Web3 test environment shouldn't be available to the react app
@ -10,8 +15,10 @@ const web3HostTestEnv = process.env.WEB3_HOST_TEST;
 const web3PortTestEnv = process.env.WEB3_PORT_TEST;

 const web3PortSocketTimeoutEnv = process.env.REACT_APP_WEB3_PORT_SOCKET_TIMEOUT
+    || (runtimeEnv && runtimeEnv.REACT_APP_WEB3_PORT_SOCKET_TIMEOUT)
    || process.env.WEB3_PORT_SOCKET_TIMEOUT;
 const web3PortSocketConnectMaxAttemptsEnv = process.env.REACT_APP_WEB3_PORT_SOCKET_CONNECT_MAX_ATTEMPTS
+    || (runtimeEnv && runtimeEnv.REACT_APP_WEB3_PORT_SOCKET_CONNECT_MAX_ATTEMPTS)
    || process.env.WEB3_PORT_SOCKET_CONNECT_MAX_ATTEMPTS;

 module.exports = {