[SOLVED] How to use values from an appsettings.json file as href variables in an AMP html?

How to use values from an appsettings.json file as href variables in an AMP html?

I am programming an AMP website www-dev.example.com that points users to a sign-up page.

The sign up page is hosted on an identity server using the subdomain auth.www-dev.example.com.

I now want to deploy my AMP website to a staging environment www-stg.example.com and at the same time point users to it's respective staging identity server auth.www-stg.example.com.

Ideally I would have a config per environment in a relative appsettings.json file and use amp-mustache to map the environment variables into the the urls of <button> or a tags.

I'm currently achieving the desired functionality, somewhat, with amp-list, but it looks like a dogs breakfast causing some undesired and painstaking effects on the font end with alignment and scaling due to the fixed dimensions.

Is there a simple way to set environment variables in AMP for use in links?

HTML Implementation

<amp-list width="130" height="45" layout="flex-item" src="/appsettings.json">
 <template type="amp-mustache">
  <button type="button" on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
 </template>
</amp-list>

appsettings.json Implementation

{
    "items":[{
    "login-url":"https://auth.www-dev.example.com/login",
    "logout-url":"https://auth.www-dev.example.com/logout",
    "signup-url":"https://auth.www-dev.example.com/signup",
    "unsubscribe-url":"https://auth.www-dev.example.com/unsubscribe"
   }]
}

Any help or suggestions would be much appreciated!

Edit - Example showing the start of the front end issues I'm looking to avoid

<!DOCTYPE html>
<html ⚡ lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bug</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <link rel="canonical" href="https://example.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style amp-custom>
        /* Delete this to reveal amp-list*/
        .flex {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;}

        .left {
            border: solid 1px blue;
        }
        .right {
            border:solid 1px green;
        }
    </style>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style><noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <template id="foo" type="amp-mustache">
        <button class="button-secondary" type="button"
            on="tap:AMP.navigateTo(url='{{signup-url}}', target='_top')">Sign Up</button>
    </template>
</head>

<body>
    <div class="flex">
        <div class="left">
            <p>Flex Left</p>
            <button on="tap:foobar.changeToLayoutContainer()">Change Layout</button>
        </div>
        <div class="right">
            <amp-list id="foobar" width="auto" height="1" src="/appsettings.json" template="foo">
                <div placeholder>Loading</div>
                <div fallback>Failed to load data.</div>
            </amp-list>
        </div>
    </div>
    
</body>

</html>

Solution

I ended up using Terraform and parsing the html file through as a template during deployment, prior to uploading the html to its hosting destination.

HCL

module "template_files" {
  source               = "hashicorp/dir/template"
  base_dir             = "./src/static_website"
  template_file_suffix = ".html"
  
  template_vars = {
    canonical  = var.canonical
    signup-url = var.signup-url
  }
}

HTML

<button type="button" on="tap:AMP.navigateTo(url='${signup-url}', target='_top')">Sign Up</button>