feat: override network through env variables after build

.dockerignore

@@ -8,4 +8,4 @@
 !.postcssrc.js
 !babel.config.js
 !vue.config.js
-!docker/nginx.conf
+!docker

Dockerfile

@@ -8,16 +8,11 @@ RUN npm ci --legacy-peer-deps
 
 COPY . .
 
-ARG VUE_APP_NETWORK_NAME
-ARG VUE_APP_NODE_URL
-ARG VUE_APP_MDW_URL
-ARG VUE_APP_EXPLORER_URL
-ARG VUE_APP_COMPILER_URL
-ARG VUE_APP_BACKEND_URL
-
 # TODO: remove legacy openssl after updating @vue/cli
 RUN NODE_OPTIONS=--openssl-legacy-provider npm run build
 
 FROM nginx:1.24-alpine
 COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/override-network.sh /docker-entrypoint.d
 COPY --from=aepp-aepp-base-build /app/dist /usr/share/nginx/html
+RUN cp /usr/share/nginx/html/index.html /usr/share/nginx/html/index.template.html

docker/override-network.sh

@@ -0,0 +1,33 @@
+#!/bin/sh
+set -e
+
+if [ -z $VUE_APP_NETWORK_NAME ]
+then
+  echo Skipping network override because VUE_APP_NETWORK_NAME is not defined
+  exit
+fi
+
+for name in VUE_APP_NODE_URL VUE_APP_MIDDLEWARE_URL VUE_APP_EXPLORER_URL VUE_APP_COMPILER_URL
+do
+  value=$(eval echo \$$name)
+  if [ -z $value ]
+  then
+    echo Expected $name to be defined
+    exit 1
+  fi
+done
+
+script="
+window.overrideNetwork = {
+  name: '$VUE_APP_NETWORK_NAME',
+  url: '$VUE_APP_NODE_URL',
+  middlewareUrl: '$VUE_APP_MIDDLEWARE_URL',
+  explorerUrl: '$VUE_APP_EXPLORER_URL',
+  compilerUrl: '$VUE_APP_COMPILER_URL',
+};
+"
+script=$(echo $script | tr '\n' ' ')
+
+cat /usr/share/nginx/html/index.template.html \
+  | sed -e "s|// global configuration placeholder|$script|" \
+  > /usr/share/nginx/html/index.html

public/index.html

@@ -13,6 +13,8 @@
     <meta name="description" content="The æternity blockchain wallet allows users to store, send, and receive æternity coins. The wallet also features an æpps (applications running on the æternity blockchain) browser.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
 
+    <script>// global configuration placeholder</script>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <% googleFontsUrl = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap' %>

src/lib/networksRegistry.js

@@ -14,24 +14,8 @@ const testNetwork = {
   compilerUrl: 'https://compiler.aepps.com',
 };
 
-let networks = process.env.NODE_ENV === 'production' ? [
-  mainNetwork,
-  testNetwork,
-] : [
-  testNetwork,
-  mainNetwork,
-];
-
-export const defaultNetwork = process.env.VUE_APP_NETWORK_NAME ? {
-  name: process.env.VUE_APP_NETWORK_NAME,
-  url: process.env.VUE_APP_NODE_URL,
-  middlewareUrl: process.env.VUE_APP_MDW_URL,
-  explorerUrl: process.env.VUE_APP_EXPLORER_URL,
-  compilerUrl: process.env.VUE_APP_COMPILER_URL,
-} : mainNetwork;
-
-if (process.env.VUE_APP_NETWORK_NAME) {
-  networks = [defaultNetwork];
-}
+const networks = (window.overrideNetwork && [window.overrideNetwork])
+  ?? (process.env.NODE_ENV === 'production'
+    ? [mainNetwork, testNetwork] : [testNetwork, mainNetwork]);
 
 export default Object.freeze(networks.map(Object.freeze));

src/store/modules/root.js

@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 import { update, mergeWith } from 'lodash-es';
-import networksRegistry, { defaultNetwork } from '../../lib/networksRegistry';
+import networksRegistry from '../../lib/networksRegistry';
 import { genRandomBuffer } from '../utils';
 
 const getAppByHost = (apps, appHost) => apps.find(({ host }) => host === appHost);
@@ -23,10 +23,10 @@ export default {
   getters: {
     networks: ({ customNetworks }) => [
       ...networksRegistry,
-      ...customNetworks.map((network) => ({ ...defaultNetwork, ...network, custom: true })),
+      ...customNetworks.map((network) => ({ ...networksRegistry[0], ...network, custom: true })),
     ],
     currentNetwork: ({ sdkUrl }, { networks }) => networks.find(({ url }) => url === sdkUrl) || {
-      ...defaultNetwork,
+      ...networksRegistry[0],
       name: sdkUrl,
       url: sdkUrl,
     },