I want to use azure app service environment variable in angular. How should I do that?

Software Developer 21

I want to use the azure app service application settings variable in angular. How should I use in that way?

1 answer

Grmacjon-MSFT 17,886 Reputation points

2021-03-23T03:53:31.34+00:00
Hi @Software Developer ,

In Azure App Service, application settings are variables passed as environment variables to the application code. For Linux apps and custom containers, App Service passes app settings to the container using the --env flag to set the environment variable in the container.

To configure your app:

Go to the Azure portal, search for and select App Services, and then select your app.

In the app's left menu, select Configuration > Application settings.

To add a new app setting, click New application setting. In the dialog, you can stick the setting to the current slot.

To edit a setting, click the Edit button on the right side.

When finished, click Update. Don't forget to click Save back in the Configuration page.

By default, values for app settings are hidden in the portal for security. To see a hidden value of an app setting, click the Value field of that setting. To see the values of all app settings, click the Show value button.

To learn more please read this documentation.

Let us know if you have further questions:

Thanks,
Grace
Please sign in to rate this answer.
Software Developer 21 Reputation points

2021-03-23T09:52:06.603+00:00

But how should I use this in angular 8? In .net we are use Iconfiguration builder for getting those values is there anything that we can use in angular.

Demetrios Christopher 1 Reputation point

2021-09-10T13:01:19.923+00:00

One example: https://www.seafish.io/blog/how-to-using-environment-variables-browser-angular-azure-app-services-part-2/

Part 1 includes a couple more options but they are far less elegant or practical.

Another option is to just add a .NET endpoint (ApiController) that returns application configuration information that it retrieves from environment variables and/or other sources. The difference is that the seafish example truly waits until it has the configuration to bootstrap the app whereas the custom backend endpoint will be loaded after the app has completed loading... that's not a big concern for reactive apps with configurable features that require the user to first take an action.

Since either one of these can be intercepted and mucked with, you obviously don't want to include anything that would give a user elevated privileges. This is purely for environment-specific application behavior that you want to control by updating an environment variable in Azure and not by deploying a new build. Think extended logging, developer features, etc. Pretty much, anything you wouldn't be afraid falling into the public's hands. For much more sensitive operations, protect that configuration endpoint with authentication/authorization.

Sayush 1 Reputation point

2022-02-25T11:01:37.237+00:00

Any solution for this?
can we access this application settings Name & Value inside Angular application?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

I want to use azure app service environment variable in angular. How should I do that?

1 answer

Your answer