Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hosting angular application in azure linux app service

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.

like image 223
Alexandr Tsvetkov Avatar asked Jun 10 '19 19:06

Alexandr Tsvetkov


People also ask

Can we deploy Angular app in Azure App Service?

Deploying the Angular App with “Azure App ServiceAzure App ServiceMicrosoft Azure Web Sites is a web-hosting platform that supports multiple technologies, and programming languages (. NET, node. js, PHP, Python). Users with Microsoft Azure subscriptions can create Websites, and deploy content and code into the Web sites.https://en.wikipedia.org › wiki › Azure_Web_AppsAzure Web Apps - Wikipedia”You can download this extension in your Visual Studio Code and use your Azure account to authenticate. After executing this command, you can find some files inside of a folder inside of the “dist” folder. These files are the files that we need to deploy in Azure.

How do you deploy Angular app Azure App Service from Visual Studio code?

Open the VS Code and open the project folder path. In VS code search Azure App ServiceAzure App ServiceMicrosoft Azure Web Sites is a web-hosting platform that supports multiple technologies, and programming languages (. NET, node. js, PHP, Python). Users with Microsoft Azure subscriptions can create Websites, and deploy content and code into the Web sites.https://en.wikipedia.org › wiki › Azure_Web_AppsAzure Web Apps - Wikipedia and install. Before deploying to Azure, we must build our Angular app using the below command which will build the Angular project and will create all necessary files to a dist folder.

How do I deploy an app to Azure App Service?

Navigate to your app in the Azure portal and select Deployment Center under Deployment. Follow the instructions to select your repository and branch. This will configure a DevOps build and release pipeline to automatically build, tag, and deploy your container when new commits are pushed to your selected branch.

Can we host Angular app in S3 bucket?

In this post, we will learn how to create a basic angular application and host them in the AWS S3 service. Let's start with creating our angular project. First, we need to install the latest version of Angular CLI by running the following command.


2 Answers

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);
like image 130
aic Avatar answered Oct 30 '22 00:10

aic


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.

like image 27
LMG Avatar answered Oct 29 '22 22:10

LMG