Deploy Angular 7 Application to Azure Web App

2
votes

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.

1
angularazureazure-web-app-service
What server do you use express.js/webpack? You need to configure the web server. – Llazar
Check this link maybe can help you webcodegeeks.com/javascript/angular-js/… – Llazar
Thanks for your replies. The article you link to is the article I followed. Dosent work. The node version on the azure web app is now 10.10 and same on my local machine. Locally I uses the node server through CLI ng serve. – Thomas Segato
sajeetharan.com/2020/02/14/… – Sajeetharan

1 Answers

8
votes

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. enter image description here
  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. enter image description here