Deploy Angular 7 Application to Azure Web App

Question

I have found a lot of articles on how to deploy angular app to azure web app. However none working. I found a solution where I create a Visual Studio Web Project, copy dist files from Visual Studio Code Project and deploy from Visual Studio. However that is not really effective. I guess the web app need some web.config files .. Isen't there a better way than this? I would prefer to deploy directly from Visual Studio Code without having an asp.net web project. If I just deploy I get following error when navigating to the page:

Cannot GET /

In this article it seems like all you need is a higher version of NodeJS:

https://dzone.com/articles/deploy-an-angular-app-from-visual-studio-code-to-a-1

But dosent seem to work.

Answer 1

It sounds like you want to deploy a static website based on Angular 7 without any node serverside codes on Azure WebApps.

I will follow the Angular offical Getting started to explain the deployment steps.

1. On my local machine, the steps will create my-app project, which include npm install -g @angular/cli, ng new my-app, and cd my-app. I will skip these steps about edit and ng serve to build directly as the step below.
2. I will get a dist directory under the my-app path when just do ng build. Next, I only need to copy all files under the dist/my-app directory to the directory wwwroot of Azure WebApp via Kudu console or FTP or other ways. Then, it works when browser the url https://<your-website-name>.azurewebsites.net like the figure below.
3. If you want to show your angular app via the website host with path, such as https://<your-website-name>.azurewebsites.net/docs, you can build your app via ng build --prod --output-path docs --base-href that will create a docs directory under my-app path, and you directly copy the docs directory into wwwroot, then it works on https://<your-website-name>.azurewebsites.net/docs from your browser as the figure above.

Here is my screenshot of my wwwroot path in Kudu.