4

I deployed an Angular App as Static Web App into Azure. Now I want to use the Application Settings in the Configuration to change variables in my environment.ts to access different APIs and Application Insights without changing the code every time.

enter image description here

environment.ts

export const environment = {
  production: true,
  SERVER_API_URL: 'https://backend01.azurewebsites.net',
  DEVELOPER_OPTIONS: true,
  ENABLE_PROD_MODE: true,

  appInsights: {
    instrumentationKey: '<key>'
}
};

I want to change the instrumentationKey and the SERVER_API_URL. Is that possible with Application Settings and does anyone know how to do it?

Thank you :)

Laura Seidel
  • 51
  • 1
  • 5

1 Answers1

5

It is possible by using an NPM package, however there is a strong warning against using it in the following stackoverflow Q&A : how to use Azure App Configuration in Angular

Another possibility would be using a JSON file like in the following (quite old, but working) example: https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/ .

For now it seems that environment variables in the Azure Static Websites are only supported for server side code as MS documents in this link (first blue box). https://learn.microsoft.com/en-us/azure/static-web-apps/application-settings

Based on the image below, One other way that you could explore is: make an azure function that can read the configuration settings and then call that azure function at the start of your Angular app to deliver the application settings that you need. However I can imagine that there will be catch22 situations.. enter image description here

Charlie V
  • 980
  • 1
  • 6
  • 12
  • The ARM template which creates a static web app has a build property which allows a custom build command to be specified - which in turn allows params. For example `npm run build -- hello=there`. I'd like to see a solution where those npm build params (e.g. db connection string and apiUri) are passed to the Angular build, to replace environment values. In short, the problem is solved at build-time. – Brent Arias Mar 14 '23 at 21:32
  • Please read the question: the topic poster wants to be able to change the parameters at run time without building. – Charlie V May 14 '23 at 19:13