#Angular configuration for multi-customer deployments to Azure using Bicep

5 messages · Page 1 of 1 (latest)

chilly canopy
#

Hello! I have an issue that I can't figure out how to solve. I'm not an Angular dev and have limited experience with this framework or front end in general, mainly working with backend. I'm developing a solution that uses Bicep for Azure deployments. While I've successfully automated the deployment and configuration of my backend resources, I'm having a hard time doing so with the Angular frontend.
The current setup for Angular is that it uses a environment.prod.ts file which contains hardcoded API endpoint that points to my Function App as well as other credentials.

Current setup:
IaC: Bicep and/or ARM template
Backend: Azure function in a Container App, SQL DB, Key Vault, logging, storage account among other things (everything here is automated - deployment, configuration, DB initialization and so on). Container app image gets pulled from a remote container registry.
Frontend: Angular (I have an image ready in remote ACR, but again, no environment variable injection. I'm open to using Static Web App if that makes it easier to work with).

The Function app (API) that gets deployed uses environment variables that it pulls from Key Vault, which works flawlessly and everything is automated using Bicep. But for Angular app that gets deployed to either Static Web App or Container App, it still obviously contains the hardcoded values from the environment file, which points to the wrong API. Is it possible to inject environment variables to Angular app at runtime? What are my possibilities here?

Help would be greatly appreciated!
Thank you!

ebon rune
#

Put a JSON file containing the URLs of your functions in the assets of the deployed Angular app at deployment time. Modify the code of the Angular app so that it first fetches this JSON file to get the endpoints before starting to use the endpoints.

chilly canopy
#

Thank you! I'll take a look at it.
Is it possible to do it with a containerized app as well? For example if I containerize my Angular app (which contains prod.environment.ts designed for CustomerA) using Docker, push it to registry, and then deploy the same image to CustomerB?

ebon rune
#

If customerA and customerB share the exact same app, I don't see why you could not.

chilly canopy
#

No, that's the thing, both frontend and backend are provided as a bundle solution to a customer, meaning that customerA has its own frontend app and API in their own seperate Azure tenant, and customerB has their own frontend and backend in their own seperate Azure tenant. Each bundle is isolated from each other, they just pull images from the remote container registry which I manage.