From 9a26e6248adfcfb974a6e4bd0c0052d78ef6fb7a Mon Sep 17 00:00:00 2001 From: apostolof Date: Sat, 13 Feb 2021 16:25:36 +0200 Subject: [PATCH] refactor: add support for runtime environment variable in built app --- .dockerignore | 2 ++ docker/concordia-app/Dockerfile | 11 ++++++++++- docker/concordia-app/create-environment.sh | 14 ++++++++++++++ docker/concordia-app/run.sh | 3 +++ packages/concordia-app/public/index.html | 4 ++++ .../concordia-app/src/options/drizzleOptions.js | 4 +++- packages/concordia-app/src/utils/drizzleUtils.js | 8 ++++++-- .../src/environment/contractsProviderEnv.js | 6 ++++++ .../concordia-shared/src/environment/pinnerEnv.js | 11 +++++++++-- .../src/environment/rendezvousEnv.js | 11 +++++++++-- .../concordia-shared/src/environment/web3Env.js | 7 +++++++ 11 files changed, 73 insertions(+), 8 deletions(-) mode change 100644 => 100755 .dockerignore create mode 100755 docker/concordia-app/create-environment.sh create mode 100755 docker/concordia-app/run.sh diff --git a/.dockerignore b/.dockerignore old mode 100644 new mode 100755 index 46f9cac..c51f4a8 --- 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 diff --git a/docker/concordia-app/Dockerfile b/docker/concordia-app/Dockerfile index 6673dbb..4ba629c 100755 --- 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"] diff --git a/docker/concordia-app/create-environment.sh b/docker/concordia-app/create-environment.sh new file mode 100755 index 0000000..c089455 --- /dev/null +++ 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 diff --git a/docker/concordia-app/run.sh b/docker/concordia-app/run.sh new file mode 100755 index 0000000..e0c073e --- /dev/null +++ b/docker/concordia-app/run.sh @@ -0,0 +1,3 @@ +sh /opt/concordia/create-environment.sh + +exec "$(which nginx)" -g "daemon off;" diff --git a/packages/concordia-app/public/index.html b/packages/concordia-app/public/index.html index 99d6395..cfd9385 100644 --- 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`. --> Concordia + + diff --git a/packages/concordia-app/src/options/drizzleOptions.js b/packages/concordia-app/src/options/drizzleOptions.js index ba6b211..81536fc 100644 --- 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; diff --git a/packages/concordia-app/src/utils/drizzleUtils.js b/packages/concordia-app/src/utils/drizzleUtils.js index 59208f2..269d89f 100755 --- 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(); diff --git a/packages/concordia-shared/src/environment/contractsProviderEnv.js b/packages/concordia-shared/src/environment/contractsProviderEnv.js index 3a545ca..c8e8df4 100644 --- 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 = { diff --git a/packages/concordia-shared/src/environment/pinnerEnv.js b/packages/concordia-shared/src/environment/pinnerEnv.js index d1df0bf..b5faf8d 100644 --- 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, diff --git a/packages/concordia-shared/src/environment/rendezvousEnv.js b/packages/concordia-shared/src/environment/rendezvousEnv.js index 44f8965..76071b2 100644 --- 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, diff --git a/packages/concordia-shared/src/environment/web3Env.js b/packages/concordia-shared/src/environment/web3Env.js index 7bc2041..6996197 100644 --- 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 = {