Angular 2 configuration issues with Azure Slot dep

Question

I'm having a problem with Angular environment variables and Azure Slots

We want to use an app service providing static Angular files and we also want to use Azure slots to make our deployments safer.

The reasons we want to use slots are:

1. Ensure that code works in the production environment before making it fully available to everyone
2. Reduce downtime to almost nil as there is no build being deployed during the "go-live" phase

Our Angular site only serving up static files means that slot deployments require a different build to populate the env.json environment settings differently for each slot.

The solution we're thinking of taking is to create an endpoint in the same Angular website and make a call from the Angular site back to its origin to get its configuration. This way configuration can be set differently in the staging and production slots in Azure and only one Angular build would be required.

We need some server side code to pick up these Azure Application settings and provide them back in an endpoint on the site. We are yet to make a decision about the technology we use to create that endpoint - we are thinking either .Net Core or NodeJs at the moment because they seem to fit well with the Angular product and the development team.

Does anyone have any experience of plugging in a server side component to provide configuration for a previously static Angular website?

Answer 1

Maybe somebody still need it. I propose to stay closer to chosen technology and expose node.js api similar to previous php answer.

I create endpoint http://<websitename>.azurewebsites.net/app-settings exposed in Azure AppService as following:

Add index.js file into src directory in your Angular code:

var http = require('http');
var server = http.createServer(function (request, response) {
    response.writeHead(200, { "Content-Type": "application/json" });
    var result = {};
    result.someAppSetting = process.env.SomeApplicationSetting;
    var jsonResult = JSON.stringify(result);
    response.end(jsonResult);
});
var port = process.env.PORT || 1337;
server.listen(port);
console.log("Server exposing api for reading application settings running at http://localhost:%d", port);

So, response contains json with SomeApplicationSetting app setting retrieved from env vars by process.env.SomeApplicationSetting. Of course you can have other strategy of exposing variables like adding only some prefixed settings to json or any other.

Add index.js to assets in angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/web.config",
  "src/index.js"
],

Then in web.config add following rewrite rule:

<rule name="Read app settings" stopProcessing="true">
  <match url="app-settings" />
  <action type="Rewrite" url="index.js"/>
</rule>

Answer 2

To achieve your requirement, you can just put the following PHP file to your site root folder. Then send a GET request to endpoint http://<websitename>.azurewebsites.net/appSettings.php via your Angular app. This will give you a JSON Object that contains all App settings.

appSettings.php

<?php

$appSettings = [];

foreach ($_SERVER as $key => $value) {

    if(preg_match('/^APPSETTING_/', $key)) {
        $appSettings[str_replace('APPSETTING_', '', $key)] = $value;
    }
}

header('Content-Type: application/json');
echo json_encode($appSettings);