UmbraCare LOGO

How to set UmbracoApplicationUrl in Azure Web Apps with Environment variables

To set the UmbracoApplicationUrl in your appsettings.json through Azure Web App configuration, you'll leverage the Application Settings similarly to setting connection strings, but this time you'll add them as Application settings instead of Connection strings. Azure Web Apps allow these settings to override the configurations in your appsettings.json by matching the keys.

Published on: , by:
Piotr Bach
Piotr Bach
Wojciech Tengler
Wojciech Tengler
Umbraco Azure

Table of contents

Step 1: Navigate to Application Settings

  1. Log in to the Azure Portal.
  2. Find and select your Web App resource.
  3. Under the "Settings" section in the navigation panel, click on "Environment variables".
  4. You'll be taken to the Configuration page, where you can add or modify Application settings and Connection strings.

Step 2: Add the UmbracoApplicationUrl Setting

  1. In the Configuration page, ensure you're in the "App settings" tab.
  2. Click on "+ New application setting".
  3. You'll need to enter the name and value for your setting. The key point here is to match the structure of your appsettings.json using a colon (:) to denote object hierarchy. So, for UmbracoApplicationUrl, which is nested under WebRouting, you would set the name as 'Umbraco__CMS__WebRouting__UmbracoApplicationUrl'.
  4. In the "Value" field, enter the URL you want to set, such as https://dev.example.pl/.
  5. Click "Apply" to persist the setting.
  6. Restart the app.
Umbraco UmbracoApplicationUrl in appsettings.json

Umbraco UmbracoApplicationUrl in appsettings.json

UmbracoApplicationUrl in Azure new setting

Azure Web App Environment variables

Step 3: Testing the setting from the Azure variable in Umbraco

To check how your new setting actually looks on the environment, you can simply use logging during application startup.

Here is how you can do it:

logger.LogInformation($"Current UmbracoApplicationUrl: {umbracoApplicationUrl}");

The code snippet below exemplifies how to retrieve the UmbracoApplicationUrl from the configuration settings during the Umbraco app startup:

/// <summary>
/// Configures the application.
/// </summary>
/// <param name="app">The application builder.</param>
/// <param name="env">The web hosting environment.</param>
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, ILogger<Startup> logger)
{
	// if (env.IsDevelopment())
	// {
	//     app.UseDeveloperExceptionPage();
	// }

	var umbracoApplicationUrl = _config["Umbraco:CMS:WebRouting:UmbracoApplicationUrl"];
	
	logger.LogInformation($"Current UmbracoApplicationUrl: {umbracoApplicationUrl}");
	
	/* Show Error Mode */
	app.UseDeveloperExceptionPage();
	
	app.UseStaticFiles();
	app.UseUnobtrusiveAjax();
	
	app.UseHttpsRedirection();

	app.UseUmbraco()
		.WithMiddleware(u =>
		{
			u.UseBackOffice();
			u.UseWebsite();
		});
}
UmbracoApplicationUrl Log output

You can expect that the updated UmbracoApplicationUrl value is displayed in Umbraco logs during the startup

How Azure environment variables are translated

When your application runs in Azure, the environment variables are read, and the double underscore "__" is automatically interpreted as a hierarchy delimiter, effectively mapping to the original Umbraco:CMS:WebRouting:UmbracoApplicationUrl path in your appsettings.json. 

This allows your application to read the setting as if it were structured in the nested JSON format.

Implementing Dynamic Configuration with IOptionsMonitor

After establishing how to set the UmbracoApplicationUrl through Azure Web Apps environment variables, it's crucial to understand how to access this configuration dynamically within your Umbraco application.

This capability ensures that your application can react to configuration changes without restarting, a feature particularly useful in cloud environments where settings might change based on different deployment scenarios.

Dynamic Configuration Access in ASP.NET Core

ASP.NET Core introduces the IOptionsMonitor interface for scenarios where options should be recomputed on demand.

This interface allows for configuration changes at runtime, particularly in cloud-hosted environments like Azure Web Apps, where settings might be updated without redeploying the application.

Here is a working sample code that is handy for getting the value from WebRoutingSettings:

public class PlatformHelper
{
    private readonly IOptionsMonitor<WebRoutingSettings> _webRoutingSettings;
    
    public PlatformHelper(IOptionsMonitor<WebRoutingSettings> webRoutingSettings)
    {
        _webRoutingSettings = webRoutingSettings;
    }

    public string GetUmbracoApplicationUrl()
    {
        return _webRoutingSettings.CurrentValue.UmbracoApplicationUrl; //Umbraco__CMS__WebRouting__UmbracoApplicationUrl
    }
}

Code Explanation

Class Definition: The PlatformHelper class is designed to encapsulate the logic needed to retrieve configuration values dynamically.

Constructor Injection: The constructor accepts an IOptionsMonitor<WebRoutingSettings> as a dependency. This technique follows the Dependency Injection (DI) pattern, decoupling the class from the configuration system and making it an easier unit test.

Dynamic Configuration Access: The GetUmbracoApplicationUrl method utilizes _webRoutingSettings.CurrentValue.UmbracoApplicationUrl to access the latest UmbracoApplicationUrl value. Thanks to IOptionsMonitor's reactive nature, this approach ensures that if the value is updated in Azure Web App settings, the change will be reflected in the application without needing a restart.

Conclusion

The tutorial culminates in a practical demonstration of Azure's environment variables seamlessly integrated into an Umbraco application, providing a flexible, environment-specific configuration mechanism.

This approach simplifies the management of settings across different deployment environments (development, staging, production, etc.) and enhances security by keeping sensitive information out of the codebase.

🌐 Explore More: Interested in learning about Umbraco and web development insights?

Explore our blog for a wealth of information and expert advice.

Related articles

↑ Top ↑