How to access the Azure Web App configuration in a static web page

Question

I have a simple set up:

Azure Web App, running a static react app
Azure Functions App, the API layer that accesses the database and that is called from the static web app

Both Web App and Functions App have a deployment slot feature, where you deploy in a separate slot first and if everything works well, you can swap the artifact in your slot and the current version, with no downtime. I really want to use this to its fullest.

I'd like to use the Web App configuration to inject the root uri of the API, have it point to the API in the corresponding slot. So the production-staging static site, should point to the production-staging API.

But here's the main problem: I cannot access the Web App configuration from my react app. I have to insert the root uri at build time, which disables the swap feature for the Web App (since it would still be pointing to staging).

Accessing the configuration works fine for the Functions App; I'm assuming because it's running node.

Martin Brandl Martin Brandl · Accepted Answer · 2020-05-04T07:36:27

The Web App Configuration are available as environment variables on the server. You won't be able to access those variables within your static react app that is running on the client.

You will need some kind of middleware that is able to read and expose the environment variables through an API.

You can use ASP.NET Core with the React project template to create both, an ASP.NET Core project that acts as an API and a standard CRA React project to act as a UI, but with the convenience of hosting both in a single app project that can be built and published as a single unit. (Source).

Then you will have to write a little controller that exposes the configurations. Here an example:

public class MyOptions
{
    public string ApiUri { get; set; }
}

[ApiController]
[Route("[controller]")]
public class ConfigurationController : ControllerBase
{
    private readonly MyOptions _options;

    public ConfigurationController(IOptions<MyOptions> options)
    {
        _options = options.Value;
    }

    [HttpGet]
    public MyOptions GetConfigurations()
    {
        return _options;
    }
}

You also need to configure the options within the startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<MyOptions>(Configuration.GetSection(nameof(MyOptions)));
    services.AddControllers();
}

Now you can set your initial value within the appsettings.json:

{
  "MyOptions": {
    "ApiUri" :  "https://myapp.domain.com/api" 
  }
}

And you are also able to overwrite the options using the Azure Web App Configurations (the middleware is configured to also use environment variables and that environment variables overwrite appsettings.json)

Now the last thing you have to do is to retrieve the settings within your static UI using:

window.location.host + "/api/configuration"

How to access the Azure Web App configuration in a static web page

2 Answers