Easily Deploy Angular App To Azure From Visual Studio Code

Sarathlal Saseendran

6y104.2k8100Article

8 Comments

Join the conversation! Your thoughts help the community grow.

Martin Brandl5y ago
Nice article Sarathlal! I have successfully deployed an Angular application to an Azure Web App with a Node.js runtime. Here is the article: https://about-azure.com/deploy-an-angular-application-to-azure/
Viraj Deshmukh5y ago
After running ng build --prod, i have to copy all the files from dist/subfolder to dist root folder. Then the application started working. I hope this comment help someone who runs into same issue like me.
Viraj Deshmukh5y ago
I get the following error when i hit the App Server URL: Failed to load resource: the server responded with a status of 404 (Not Found) /ResourceManagement/runtime-es2015.858f8dd898b75fe86926.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) /ResourceManagement/polyfills-es2015.a3f585d393ecee6ff04d.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) scripts.00866a06f9144eb57493.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) /ResourceManagement/main-es2015.f0fcb0bd3957ea1298d6.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) styles.f3e57793e0e36a1a66da.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)When i checked in my dist folder and can see those files in Azure Repository. Can any one guide me on this issue.
Kc Sahoo5y ago
You can do now by choosing node as code option in web app creation in Azure
Alok Uniyal5y ago
Thank you very much for this easiest tutorial. Successfully deployed angular Application. Please can you post a tutorial how to deploy Node + Express API into azure.
Gianfranco Manrique5y ago
Thanks a lot. I did all steps and it was succesfully.
Rikam Palkar6y ago
interesting.
- Sarathlal Saseendran6y ago
  Thank you very much Rikam Palkar

Introduction

Already, there are many articles available about Azure deployment of Angular apps. Some articles misleading and you can’t deploy Angular apps referring those articles. Hence, I decided to write a simple article with all easy steps.

Create an Azure Web App in Azure Portal

Please choose .NET Core 3.1 or .NET Core 2.1 as runtime stack even though we are creating Angular App. Currently, Azure Web App Service extension for Visual Studio Code is not supporting the Node deployment in my case. I have tried various Node versions but nothing worked for me.

We can validate and create the Web App now.

After few moments, your Web App will be ready to use.

Create an Angular 8 application using Angular CLI

I am still using the Angular 8 stable version. We can create a simple Angular application using Angular CLI

ng new AngularSample

After creating the Angular application, you can open it with Visual Studio Code.

We can install Azure App Service extension in VS Code.

Please note that, this is still a Preview version. We can install this extension to VS Code.

You can see a new Azure workloads button at the bottom side. If you click that button, you can see the Azure related workloads.

We can Sign into Azure first.

After Sign into the Azure portal from Visual Studio Code, you can see the list of available subscriptions and web apps for that user.

We have previously created a Web App “sarathangular” with ASP.NET 3.1 runtime stack. We can deploy our Angular application to this Web App easily.

Before deploying to Azure, we must build our Angular app using below command.

ng build --prod

Above command will build our Angular project and create all deliverable files to a dist folder.

Please note that, in some cases another sub folder in the name of your project will be created also. This is due to the settings in Angular.json file.

We must deploy this “dist\AngularSample” folder to Azure.

We can click Azure App Service extension and click our Web App and right click and choose Deploy to Web App option.

By default, it will show the default Angular project folder. You must click Browse button and choose correct deliverables folder as we discussed earlier.

You must choose the correct “dist\AngularSample” folder and click Ok button to proceed.

Simple, your Angular app is ready to use now. We can make some minor modifications in the code and deploy again. After modifying the code, you must build the application using below command again

ng build --prod

We can choose the Azure App Service extension again select our Web App and choose Deploy to Web App option.

You can open the Web App and see that the new changes are successfully applied here.

Conclusion

In this post, we have seen that how to deploy an Angular app from Visual Studio Code to Azure Web App Service with simple steps. We have created a Web App in Azure portal with .NET 3.1 runtime stack and later we added Azure App Service extension to Visual Studio Code. This extension currently, supports Node Runtime but I could not deploy Angular application to that environment. Hence, I choose .NET Core 3.1 runtime. You can choose 2.1 runtime also. I checked that also. If anybody tried Node version and successfully deployed Angular app, please inform me. We can automate these deployment steps using CI/CD pipeline in Azure DevOps also.