2

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.

Improve this question
4
  • What server do you use express.js/webpack? You need to configure the web server. Commented Dec 6, 2018 at 16:16
  • Check this link maybe can help you webcodegeeks.com/javascript/angular-js/… Commented Dec 6, 2018 at 16:28
  • 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. Commented Dec 6, 2018 at 17:43
  • sajeetharan.com/2020/02/14/… Commented Feb 15, 2020 at 12:57

1 Answer 1

Reset to default
8

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, very detailed! I will test later, highly appreciated!
Check also here, a step by step tutorial to deploy an Angular web app from VS Code to Azure with the new Static Web Site feature. code.visualstudio.com/tutorials/static-website/getting-started

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.