Hosting angular application in azure linux app service

Question

I am using angular framework to build front-end applications. Is there any way, how can I deploy applications to Azure Linux Application Service?

I have created Web App with NodeJS stack and assign it to Linux App Service. I have built my angular app with command ng build --prod and deployed it to this web app. When I open web browser with url: https://<web-app-name.azurewebsites.net/ what can I see is default html page, not my index.html.

I was thinking about using static web site on Azure Storage, but what I have found out, I can have only one static web site per one Azure Storage, but let's say I have 10 static web sites. So I do not need to create 10 Azure Storage Account.

aic aic · Accepted Answer · 2019-12-28T18:36:13

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://stackguides.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);

Hosting angular application in azure linux app service

2 Answers