Merge pull request #2617 from knorrium/frontend_runtime_config

Initial frontend runtime config support
2025-02-24 14:50:52 +01:00 · 2022-11-21 18:04:03 +09:00 · 2022-11-21 18:04:03 +09:00 · 88fa6bffb5
commit 88fa6bffb5
parent e051758ca7 235ac204b4
10 changed files with 108 additions and 12 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,5 @@ data
 docker-compose.yml
 backend/mempool-config.json
 *.swp
+frontend/src/resources/config.template.js
+frontend/src/resources/config.js
--- a/docker/frontend/Dockerfile
+++ b/docker/frontend/Dockerfile
@ -8,7 +8,9 @@ WORKDIR /build
 COPY . .
 RUN apt-get update
 RUN apt-get install -y build-essential rsync
+RUN cp mempool-frontend-config.sample.json mempool-frontend-config.json
 RUN npm install --omit=dev --omit=optional
+
 RUN npm run build

 FROM nginx:1.17.8-alpine
@ -28,7 +30,9 @@ RUN chown -R 1000:1000 /patch && chmod -R 755 /patch && \
        chown -R 1000:1000 /var/cache/nginx && \
        chown -R 1000:1000 /var/log/nginx && \
        chown -R 1000:1000 /etc/nginx/nginx.conf && \
-        chown -R 1000:1000 /etc/nginx/conf.d
+        chown -R 1000:1000 /etc/nginx/conf.d && \
+        chown -R 1000:1000 /var/www/mempool
+
 RUN touch /var/run/nginx.pid && \
        chown -R 1000:1000 /var/run/nginx.pid

--- a/docker/frontend/entrypoint.sh
+++ b/docker/frontend/entrypoint.sh
@ -10,4 +10,51 @@ cp /etc/nginx/nginx.conf /patch/nginx.conf
 sed -i "s/__MEMPOOL_FRONTEND_HTTP_PORT__/${__MEMPOOL_FRONTEND_HTTP_PORT__}/g" /patch/nginx.conf
 cat /patch/nginx.conf > /etc/nginx/nginx.conf

+# Runtime overrides - read env vars defined in docker compose
+
+__TESTNET_ENABLED__=${TESTNET_ENABLED:=false}
+__SIGNET_ENABLED__=${SIGNET_ENABLED:=false}
+__LIQUID_ENABLED__=${LIQUID_EANBLED:=false}
+__LIQUID_TESTNET_ENABLED__=${LIQUID_TESTNET_ENABLED:=false}
+__BISQ_ENABLED__=${BISQ_ENABLED:=false}
+__BISQ_SEPARATE_BACKEND__=${BISQ_SEPARATE_BACKEND:=false}
+__ITEMS_PER_PAGE__=${ITEMS_PER_PAGE:=10}
+__KEEP_BLOCKS_AMOUNT__=${KEEP_BLOCKS_AMOUNT:=8}
+__NGINX_PROTOCOL__=${NGINX_PROTOCOL:=http}
+__NGINX_HOSTNAME__=${NGINX_HOSTNAME:=localhost}
+__NGINX_PORT__=${NGINX_PORT:=8999}
+__BLOCK_WEIGHT_UNITS__=${BLOCK_WEIGHT_UNITS:=4000000}
+__MEMPOOL_BLOCKS_AMOUNT__=${MEMPOOL_BLOCKS_AMOUNT:=8}
+__BASE_MODULE__=${BASE_MODULE:=mempool}
+__MEMPOOL_WEBSITE_URL__=${MEMPOOL_WEBSITE_URL:=https://mempool.space}
+__LIQUID_WEBSITE_URL__=${LIQUID_WEBSITE_URL:=https://liquid.network}
+__BISQ_WEBSITE_URL__=${BISQ_WEBSITE_URL:=https://bisq.markets}
+__MINING_DASHBOARD__=${MINING_DASHBOARD:=true}
+__LIGHTNING__=${LIGHTNING:=false}
+
+# Export as environment variables to be used by envsubst
+export __TESTNET_ENABLED__
+export __SIGNET_ENABLED__
+export __LIQUID_ENABLED__
+export __LIQUID_TESTNET_ENABLED__
+export __BISQ_ENABLED__
+export __BISQ_SEPARATE_BACKEND__
+export __ITEMS_PER_PAGE__
+export __KEEP_BLOCKS_AMOUNT__
+export __NGINX_PROTOCOL__
+export __NGINX_HOSTNAME__
+export __NGINX_PORT__
+export __BLOCK_WEIGHT_UNITS__
+export __MEMPOOL_BLOCKS_AMOUNT__
+export __BASE_MODULE__
+export __MEMPOOL_WEBSITE_URL__
+export __LIQUID_WEBSITE_URL__
+export __BISQ_WEBSITE_URL__
+export __MINING_DASHBOARD__
+export __LIGHTNING__
+
+folder=$(find /var/www/mempool -name "config.js" | xargs dirname)
+echo ${folder}
+envsubst < ${folder}/config.template.js > ${folder}/config.js
+
 exec "$@"
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -152,15 +152,14 @@
            "assets": [
              "src/favicon.ico",
              "src/resources",
-              "src/robots.txt"
+              "src/robots.txt",
+              "src/config.js",
+              "src/config.template.js"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
            ],
-            "scripts": [
-              "generated-config.js"
-            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
--- a/frontend/generate-config.js
+++ b/frontend/generate-config.js
@ -2,7 +2,8 @@ var fs = require('fs');
 const { spawnSync } = require('child_process');

 const CONFIG_FILE_NAME = 'mempool-frontend-config.json';
-const GENERATED_CONFIG_FILE_NAME = 'generated-config.js';
+const GENERATED_CONFIG_FILE_NAME = 'src/resources/config.js';
+const GENERATED_TEMPLATE_CONFIG_FILE_NAME = 'src/resources/config.template.js';

 let settings = [];
 let configContent = {};
@ -67,10 +68,17 @@ if (process.env.DOCKER_COMMIT_HASH) {

 const newConfig = `(function (window) {
  window.__env = window.__env || {};${settings.reduce((str, obj) => `${str}
-    window.__env.${obj.key} = ${ typeof obj.value === 'string' ? `'${obj.value}'` : obj.value };`, '')}
+    window.__env.${obj.key} = ${typeof obj.value === 'string' ? `'${obj.value}'` : obj.value};`, '')}
    window.__env.GIT_COMMIT_HASH = '${gitCommitHash}';
    window.__env.PACKAGE_JSON_VERSION = '${packetJsonVersion}';
-  }(global || this));`;
+  }(this));`;
+
+const newConfigTemplate = `(function (window) {
+  window.__env = window.__env || {};${settings.reduce((str, obj) => `${str}
+    window.__env.${obj.key} = ${typeof obj.value === 'string' ? `'\${__${obj.key}__}'` : `\${__${obj.key}__}`};`, '')}
+    window.__env.GIT_COMMIT_HASH = '${gitCommitHash}';
+    window.__env.PACKAGE_JSON_VERSION = '${packetJsonVersion}';
+  }(this));`;

 function readConfig(path) {
  try {
@ -89,6 +97,16 @@ function writeConfig(path, config) {
  }
 }

+function writeConfigTemplate(path, config) {
+  try {
+    fs.writeFileSync(path, config, 'utf8');
+  } catch (e) {
+    throw new Error(e);
+  }
+}
+
+writeConfigTemplate(GENERATED_TEMPLATE_CONFIG_FILE_NAME, newConfigTemplate);
+
 const currentConfig = readConfig(GENERATED_CONFIG_FILE_NAME);

 if (currentConfig && currentConfig === newConfig) {
@ -106,4 +124,4 @@ if (currentConfig && currentConfig === newConfig) {
  console.log('NEW CONFIG: ', newConfig);
  writeConfig(GENERATED_CONFIG_FILE_NAME, newConfig);
  console.log(`${GENERATED_CONFIG_FILE_NAME} file updated`);
-};
+}
--- a/frontend/src/index.bisq.html
+++ b/frontend/src/index.bisq.html
@ -1,8 +1,10 @@
 <!doctype html>
 <html lang="en">
+
 <head>
  <meta charset="utf-8">
  <title>mempool - Bisq Markets</title>
+  <script src="/resources/config.js"></script>
  <base href="/">

  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
@ -31,11 +33,13 @@
  <link rel="manifest" href="/resources/bisq/favicons/site.webmanifest">
  <link rel="mask-icon" href="/resources/bisq/favicons/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="/resources/bisq/favicons/favicon.ico">
- 
+
  <link id="canonical" rel="canonical" href="https://bisq.markets">

 </head>
+
 <body>
  <app-root></app-root>
 </body>
+
 </html>
--- a/frontend/src/index.liquid.html
+++ b/frontend/src/index.liquid.html
@ -1,8 +1,10 @@
 <!doctype html>
 <html lang="en">
+
 <head>
  <meta charset="utf-8">
  <title>mempool - Liquid Network</title>
+  <script src="/resources/config.js"></script>
  <base href="/">

  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
@ -17,7 +19,7 @@
  <meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
  <meta property="twitter:image:src" content="https://liquid.network/resources/liquid/liquid-network-preview.png" />
  <meta property="twitter:domain" content="liquid.network">
-  
+
  <link rel="apple-touch-icon" sizes="180x180" href="/resources/liquid/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="48x48" href="/resources/liquid/favicons/favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/resources/liquid/favicons/favicon-32x32.png">
@ -33,7 +35,9 @@

  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
  <app-root></app-root>
 </body>
+
 </html>
--- a/frontend/src/index.mempool.html
+++ b/frontend/src/index.mempool.html
@ -1,8 +1,10 @@
 <!doctype html>
 <html lang="en">
+
 <head>
  <meta charset="utf-8">
  <title>mempool - Bitcoin Explorer</title>
+  <script src="/resources/config.js"></script>
  <base href="/">

  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem." />
@ -17,7 +19,7 @@
  <meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
  <meta property="twitter:image:src" content="https://mempool.space/resources/mempool-space-preview.png" />
  <meta property="twitter:domain" content="mempool.space">
-  
+
  <link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
@ -32,7 +34,9 @@

  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
  <app-root></app-root>
 </body>
+
 </html>
--- a/nginx-mempool.conf
+++ b/nginx-mempool.conf
@ -21,6 +21,13 @@
 		try_files $uri @index-redirect;
 		expires 1h;
 	}
+
+	# only cache /resources/config.* for 5 minutes since it changes often
+	location /resources/config. {
+		try_files $uri =404;
+		expires 5m;
+	}
+
 	location @index-redirect {
 		rewrite (.*) /$lang/index.html;
 	}
--- a/production/nginx/server-common.conf
+++ b/production/nginx/server-common.conf
@ -81,6 +81,13 @@ location /resources {
 	try_files $uri /en-US/index.html;
 	expires 1w;
 }
+
+# only cache /resources/config.* for 5 minutes since it changes often
+location /resources/config. {
+	try_files $uri =404;
+	expires 5m;
+}
+
 # cache /main.f40e91d908a068a2.js forever since they never change
 location ~* ^/.+\..+\.(js|css) {
 	try_files /$lang/$uri /en-US/$uri =404;