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

Answer 1

As for your first question, have a look at this article that explains how to manage URL rewriting with node.js applications. link

Please accept this answer and create another post for any other questions.

Answer 2

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);