Angular Cli App Not Running When Deploying to Linux App Service

Angular CLI app not running when deploying to Linux App Service

There is a subtle and big difference between the Linux and Windows App service: IIS - which in Windows is actively looking to serve any app, whereas in Linux you have to spin up something on your own to serve it - Express for example.

After some research I discovered that I don't need a full App service dedicated to run a static app (such as Angular or React). It can be done just as efficiently and much cheaper with something like Storage. -> https://code.visualstudio.com/tutorials/static-website/getting-started

Hosting angular application in azure linux app service

The reason why you're still seeing the default page is that the server doesn't know to look at index.html which is the entry point for the Angular app. You need to create an index.js file in your Angular app and then include it in the assets section of your angular.json.

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

Here is an example index.js file, it also includes redirecting from the non-www domain to the www domain:

// Imports
var express = require('express');
var path = require('path');

// Node server
var server = express();

// When you create a Node.js app, by default, it's going to use hostingstart.html as the 
// default document unless you configure it to look for a different file
// https://blogs.msdn.microsoft.com/waws/2017/09/08/things-you-should-know-web-apps-and-linux/#NodeHome
var options = {
    index: 'index.html'
};

// Middleware to redirect to www
server.all("*", (request, response, next) => {
    let host = request.headers.host;

    if (host.match(/^www\..*/i)) {
        next();
    } else {
        response.redirect(301, "https://www." + host + request.url);
    }
});

// This needs to be after middleware configured for middleware to be applied
server.use('/', express.static('/home/site/wwwroot', options));

// Angular routing does not work in Azure by default
// https://stackoverflow.com/questions/57257403/how-to-host-an-angular-on-azure-linux-web-app
const passthroughExtensions = [
    '.js',
    '.ico',
    '.css',
    '.png',
    '.jpg',
    '.jpeg',
    '.woff2',
    '.woff',
    '.ttf',
    '.svg',
    '.eot'
];

// Route to index unless in passthrough list
server.get('*', (request, response) => {
    if (passthroughExtensions.filter(extension => request.url.indexOf(extension) > 0).length > 0) {
        response.sendFile(path.resolve(request.url));
    } else {
        response.sendFile(path.resolve('index.html'));
    }
});

server.listen(process.env.PORT);

Deploying an Angular Universal App in Azure web app service - Linux based

After spending couple of hours on this, I was able to deploy this app using Azure pipeline after making below change in server.ts file -

const distFolder = join(process.cwd(), 'dist/app_name/browser');

And changing startup command for Azure Application Setting from pm2 serve /home/site/wwwroot -no-daemon-spa to node /home/site/wwwroot/dist/app_name/server/main.js

Deployed angular app to Azure web app - But showing the default Azure page

I resolved this by:

1. Creating a Web App by selecting the Runtime stack as ASP.NET V4.7 and selecting the OS as Windows.
2. Deploy the angular app using Azure DevOps.

The steps are in this blog post: http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html

---

Related Topics