Merge pull request #2617 from knorrium/frontend_runtime_config

Initial frontend runtime config support

.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

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
 

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 "$@"

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,

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`);
-};
+}

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.">
@@ -35,7 +37,9 @@
   <link id="canonical" rel="canonical" href="https://bisq.markets">
 
 </head>
+
 <body>
   <app-root></app-root>
 </body>
+
 </html>

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.">
@@ -33,7 +35,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
+
 </html>

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." />
@@ -32,7 +34,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
+
 <body>
   <app-root></app-root>
 </body>
+
 </html>

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;
 	}

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;