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
Login to Azure portal and choose “Create a resource” button and choose Web App template.
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.