ANGULAR 20.3 PROJECT DEPLOYMENT IN AZURE

ANGULAR 20.3 PROJECT DEPLOYMENT IN AZURE  

Where are the app folder files being stored in dist?

Angular 20.3 Build Output

When you run:

ng build --configuration production

Angular compiles your application into static files.

Suppose your project structure is:

PropelFeb2026-emsv26
│
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── index.html
│   └── styles.css
│
├── angular.json
└── package.json

After building, Angular creates:

dist
└── PropelFeb2026-emsv26
    └── browser
        ├── index.html
        ├── favicon.ico
        ├── assets
        │   ├── images
        │   └── ...
        ├── main-5PJWDBGG.js
        ├── polyfills-xxxxx.js
        ├── styles-YN5TJYO7.css
        └── ...

Where is the app Folder?

Notice there is no app folder.

Why?

Because Angular compiles all of your TypeScript files into optimized JavaScript bundles.

For example:

Before Build

src
└── app
    ├── app.component.ts
    ├── app.component.html
    ├── app.routes.ts
    ├── employee
    │    ├── employee-list.component.ts
    │    ├── employee-add.component.ts
    │    └── ...
    └── services
         └── employee.service.ts

After Build

Everything is bundled into files like:

main-5PJWDBGG.js

This file contains:

  • AppComponent
  • EmployeeComponent
  • Services
  • Pipes
  • Routing
  • Models
  • Components

Everything is compiled together and optimized.

What Happens to HTML?

Example:

employee-list.component.html

gets compiled into JavaScript templates inside:

main-5PJWDBGG.js

What Happens to TypeScript?

Example:

employee.service.ts

becomes JavaScript inside:

main-5PJWDBGG.js

What Happens to CSS?

Global CSS

src/styles.css

becomes

styles-YN5TJYO7.css

Component CSS is also bundled and optimized.

What Happens to Images?

Images under:

src/assets

remain as:

assets/

because Angular copies the assets folder directly.

Build Process Diagram

src
│
├── app
├── assets
├── styles.css
├── index.html
│
│
│ ng build --configuration production
▼
dist
│
└── PropelFeb2026-emsv26
    │
    └── browser
         │
         ├── index.html
         ├── assets
         ├── main-xxxxx.js
         ├── styles-xxxxx.css
         ├── polyfills.js
         └── runtime.js (if generated)

Why Does Angular Bundle Everything?

Because it provides:

  • Faster loading
  • Smaller file sizes
  • Minification
  • Tree shaking (unused code removed)
  • Better browser performance
  • Optimized caching

Where Are the Files Stored in Azure?

After deployment, the contents of your browser folder are copied to:

Azure App Service
└── site
    └── wwwroot
         ├── index.html
         ├── main-xxxxx.js
         ├── styles-xxxxx.css
         ├── assets
         └── web.config (if included)

This is exactly what you saw in Kudu.

Flow of CI/CD

Developer
      │
      ▼
Git Push
      │
      ▼
Azure Repos
      │
      ▼
Build Pipeline
      │
      ▼
ng build --configuration production
      │
      ▼
dist
└── PropelFeb2026-emsv26
    └── browser
      │
      ▼
Archive (ZIP)
      │
      ▼
Publish Artifact
      │
      ▼
Release Pipeline
      │
      ▼
Azure App Service
      │
      ▼
site/wwwroot
      │
      ▼
Website

This deployment journey is an excellent example of troubleshooting:

  1. Create an Angular project.
  2. Push it to Azure Repos.
  3. Build it with Azure Pipelines.
  4. Deploy it to Azure App Service.
  5. Show the initial deployment issue caused by packaging the wrong folder.
  6. Use Kudu to inspect site/wwwroot.
  7. Correct the archive path to the browser folder.
  8. Redeploy and demonstrate the successful result.

Comments

Post a Comment

Popular posts from this blog

Interview Tips: Dot NET Framework vs Net CORE

Image
Interview Tips: Dot NET Framework vs Net CORE .NET Framework What :  It's a software development framework created by Microsoft, mainly used for building Windows applications. Why :  It has been around for a long time and is very reliable for building large, complex applications especially for enterprises. How :  You use it to build applications that run exclusively on Windows, making use of a vast array of built-in libraries and features. Why Not :  It can't be used for cross-platform applications, so if you need your application to run on other operating systems like macOS or Linux, .NET Framework isn't the right choice. .NET Core What :  It's a newer, open-source, and cross-platform framework from Microsoft, designed for modern app development. Why :  It's lightweight, high-performance, and can run on multiple operating systems (Windows, macOS, Linux). How :  You use it to build modern, scalable, and quickly deployable applications, especially cloud...
Read more

OOP Concept in real-time scenario: Mobile Device Management Software

  Scenario: Mobile Device Management Software Context : You are developing a Device Management System for mobile providers like Realme, Redmi, Samsung, and Nokia. The system tracks and manages mobile devices, their specifications, and behaviors (e.g., sending notifications, updating software, logging activities). The software must handle different device types (e.g., smartphones, feature phones) with shared and unique features, ensure secure data handling, and support extensible functionality. Real-Time Relevance : Mobile providers need software to manage device configurations, push updates, monitor performance, and log activities for diagnostics. OOP concepts like encapsulation ensure secure data access, inheritance and polymorphism enable flexible device-specific behaviors, abstraction simplifies complex operations, and interfaces enforce consistent functionality across devices. This scenario aligns with tasks at companies like Equifax (data processing) or mobile software firms,...
Read more

PRACTICE ASSIGNMENTS

  ✅ 1. Banking System (Accounts → Transactions) 🎯 Scenario Create a banking module where Account operations are defined in one namespace and Transaction reports in another . 📌 Requirements Namespace: BankCore Class: Accounts Method: public static void CheckBalance() Namespace: BankReports Class: TransactionReport Call CheckBalance() from BankCore Display: Available Balance: 50000 ✅ 2. Employee Payroll System 🎯 Scenario HR system where salary calculation is in one project and report generation in another 📌 Requirements Namespace: HRModule Class: Payroll Method: public static void CalculateSalary() Namespace: HRReports Class: SalaryReport Call method from HRModule Add another method: CalculateBonus() ✅ 3. E-Commerce Order System 🎯 Scenario Order processing and invoice generation handled separately. 📌 Requirements Namespace: OrderModule Class: OrderService Method: public static void CreateOrder()...
Read more