Currently developing an AMP website with the URL www-dev.example.com, directing users to a sign-up page. The sign-up page is hosted on an identity server under the subdomain auth.www-dev.example.com.
Now, the goal is to deploy the AMP website to a staging environment using the URL www-stg.example.com, and simultaneously direct users to its corresponding staging identity server auth.www-stg.example.com.
The plan involves creating a config per environment within a relative appsettings.json file and utilizing amp-mustache to map the environment variables into the URLs of <button> or a tags.
While trying to achieve this functionality using amp-list, some issues have arisen, impacting the front end with alignment and scaling problems due to fixed dimensions that result in undesirable outcomes.
Is there a straightforward method to set environment variables in AMP for use in links?
Implementation in HTML:
<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>
Implementation in appsettings.json:
{
"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 suggestions or assistance would be greatly appreciated!
Edit - Example demonstrating initial front end issues that I aim to avoid.
<!DOCTYPE html>
<html ⚡ lang="en">
<!-- Rest of the code remains unchanged from original text -->