Serve a SPA like Angular or React on Azure App Service for Linux

Picture: Microsoft

Serve a SPA like Angular or React on Azure App Service for Linux

In many scenarios it can make sense to host single page applications via an Azure Web App, for example if you have many small applications - then the Static Web App will simply be more expensive. Likewise, it can be very convenient to host a Single Page Application on Web Apps if you have the App Service Plan anyway because you run multiple APIs with it.

Now, with the App Service for Linux, unlike its Windows brother, each web app runs in its own container. And from a container it is not so easy to deliver static files like HTML, CSS or JavaScript - because the default configuration simply does not do this. We need a web server.

For this purpose, we can simply use the NodeJS runtime of the web app. Here a sample [https://docs.microsoft.com/en-us/azure/app-service/provision-resource-bicep?WT.mc_id=DT-MVP-5001507) file:

resource appServicePlan 'Microsoft.Web/[email protected]' existing = {
  name: youAppServicePlanName
}

resource webApp 'Microsoft.Web/[email protected]' = {
    name: yourWebAppName
    location: yourAzureLocation
    properties: {
        serverFarmId: yourAppServicePlanId
        siteConfig: {
            linuxFxVersion: 'NODEJS|16-LTS'
            alwaysOn: true
            http20Enabled: true
            webSocketsEnabled: false
            autoHealEnabled: true
            detailedErrorLoggingEnabled: true
            ftpsState: 'Disabled'
        }
        httpsOnly: true
        clientAffinityEnabled: false
    }
    identity: {
        type: 'SystemAssigned'
    }
    tags: tags
}

Now we need a web server, in this case an Express Server, which is available by default with NodeJS on Azure Web App on Linux.

var express = require('express');
var server = express();
var options = {
  index: 'index.html'
};
server.use('/', express.static('/home/site/wwwroot', options));
server.listen(process.env.PORT);

This is now configured as part of the Angular project via the index.js, which should deliver the index.html.

Done.

Your container now serves a static web app via NodeJS with great performance!