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:

 1resource appServicePlan 'Microsoft.Web/serverfarms@2021-02-01' existing = {
 2  name: youAppServicePlanName
 3}
 4
 5resource webApp 'Microsoft.Web/sites@2021-02-01' = {
 6    name: yourWebAppName
 7    location: yourAzureLocation
 8    properties: {
 9        serverFarmId: yourAppServicePlanId
10        siteConfig: {
11            linuxFxVersion: 'NODEJS|16-LTS'
12            alwaysOn: true
13            http20Enabled: true
14            webSocketsEnabled: false
15            autoHealEnabled: true
16            detailedErrorLoggingEnabled: true
17            ftpsState: 'Disabled'
18        }
19        httpsOnly: true
20        clientAffinityEnabled: false
21    }
22    identity: {
23        type: 'SystemAssigned'
24    }
25    tags: tags
26}

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.

1var express = require('express');
2var server = express();
3var options = {
4  index: 'index.html'
5};
6server.use('/', express.static('/home/site/wwwroot', options));
7server.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!