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,13 @@ 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-env.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-env.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+envsubst < /usr/share/nginx/html/index.template.html > /usr/share/nginx/html/index.html

public/index.html

@@ -13,6 +13,16 @@
     <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>
+      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>
+
     <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,21 @@ 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 ? {
+const envNetwork = {
   name: process.env.VUE_APP_NETWORK_NAME,
   url: process.env.VUE_APP_NODE_URL,
-  middlewareUrl: process.env.VUE_APP_MDW_URL,
+  middlewareUrl: process.env.VUE_APP_MIDDLEWARE_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 = (() => {
+  if (!['', '$VUE_APP_NETWORK_NAME'].includes(window.overrideNetwork.name)) {
+    return [window.overrideNetwork];
+  }
+  if (envNetwork.name) return [envNetwork];
+  if (process.env.NODE_ENV === 'production') return [mainNetwork, testNetwork];
+  return [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,
     },