I want to use Azure app service 'Application settings' variables into my Angular web application

3
votes

I want my angular web app to use the Application setting variable of Azure app service so, please guide me to the solution. So that I don't need to, again and again, build my app and deploy. I have to only directly change the variable at the portal and my app would be using it.

enter image description here

2
angulartypescriptazureazure-web-app-service
Do you just want to get the settings value in the azure? You could use process.env.[settings name] to retrieve it. – George Chen
where and how should I write this? In service or environment file of angular? – V_for_Vj
This is used for when you need to get the values from settings. – George Chen
ok let me try and see – V_for_Vj
Any update on this issue? – George Chen

2 Answers

1
votes

In the azure web all application settings are setting as the environment, you could check them in your web kudu page under the environment tag.

More information about how it work you could check this doc:How Application Strings and Connection Strings Work.

And in the official doc, it also say if you use python use os.environ['WEBSITE_SITE_NAME'] to access an app setting and in nodejs use process.env.NODE_ENV to access it.

0
votes

What you are asking for is difficult (and most probably not worth the effort required).

Application settings in azure app service work as follows:

For ASP.NET and ASP.NET Core developers, setting app settings in App Service are like setting them in in Web.config or appsettings.json, but the values in App Service override the ones in Web.config or appsettings.json. You can keep development settings (for example, local MySQL password) in Web.config or appsettings.json, but production secrets (for example, Azure MySQL database password) safe in App Service. The same code uses your development settings when you debug locally, and it uses your production secrets when deployed to Azure.

The above is not your case, for your case you'd have:

Other language stacks, likewise, get the app settings as environment variables at runtime.

What is the common pattern in both? They are server side. You are trying to make a client side (javascript) configuration on the server side.

  1. There is no API that will get you these configuration values out of the box.
  2. The configuration values will be all exposed to the end user
  3. Since for your case you'd need to take the data from enviroment variable, then you'd have to build some kind of API, that will read from enviromental variables and serve the angular application from a get configuration request.