Azure Web App — Angular Front-end Service - part 02

Shalika Prasad
4 min readAug 3, 2020

Lets continue our second part related to Deploy Your Azure Web Application tutorial.

We can create any type of applications like .Net,npm, java, and like these.

  1. I create 2 applications for UI and Backend. After creating the web app (simple way) and you want to deploy your web app. (I used angular for UI and spring boot for backend)
  • Add Application insights component when creating web app(but, you cannot add Insight for Java)

2. UI

  • You want to go Deployment Center to get FTP connection access to upload angular dist folder files to our web app. (If you have multiple developers, then you can use another method like using azure Devops for uploading your code using Github. Because, you can create pipeline when update Github code, for auto-update web app- that can be easy for you than using FTP)
  • After you want to add the environment for Application Insights in Angular code.
  • Add packages
  • Add MonitoringService
  • After you want to add MonitoringService for your Login Page (want to monitor from web pages)
  • Now You want to deploy your angular app.
ng build — prod
  • After open WinSCP like the software to upload file and login FTP using web app credentials.
  • After deleting the file (default .html) and add your app folder (inside your dist folder).
  • You can see more details about the environment using Kudu.
  • You must remember to set up your folder path.
  • Now, You can go to the site and go to Application Map inside the Application Insights. You can see browser details and server responses like all of the monitoring details.

As well as you can see more details about UI web app via matrics.

Next, we go to part 03 related to Deploy Your Azure Web Application tutorial.

Azure Web App- Spring Boot Backend Service with Azure Database for MySQL server — part 03

Conclusion

--

--