How can I access Azure Static Web Apps Application Settings in Angular?

Question

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.

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?

Answer 1

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..