How do you deploy Angular to Azure?

Angular can be deployed to Azure in several ways. For a normal Angular SPA + ASP.NET Core Web API architecture, two common choices are:

1. Azure Static Web Apps — well suited to a separately hosted Angular SPA.
2. Azure App Service — useful when Angular is hosted with ASP.NET Core, or when you want a conventional web-host deployment.

Assume this architecture:

Browser
   |
   ↓
Angular
Azure Static Web Apps
   |
   | HTTPS / JSON
   ↓
ASP.NET Core Web API
Azure App Service
   |
   ↓
Azure SQL

1. Build Angular for production

First create the production build:

ng build --configuration production

Depending on your Angular configuration/version, the output may look like:

dist/
└── portfolio/
    └── browser/
        ├── index.html
        ├── main-XXXX.js
        ├── styles-XXXX.css
        └── chunk-XXXX.js

These are the files that need to be hosted.

The basic process is:

Angular Source
      ↓
    ng build
      ↓
 Production Build
      ↓
     dist/
      ↓
     Azure

Option 1 — Azure Static Web Apps

For a client-side Angular application deployed separately from ASP.NET Core, Azure Static Web Apps is a natural hosting option.

Architecture:

                   Azure
                     |
          ┌──────────┴──────────┐
          ↓                     ↓
 Azure Static Web Apps    Azure App Service
       Angular            ASP.NET Core API
          |                     |
          └──── HTTPS ─────────→|
                                ↓
                            Azure SQL

2. Configure the production API URL

Suppose the ASP.NET Core API is deployed at:

https://myportfolio-api.azurewebsites.net

Your production Angular configuration might contain:

export const environment = {
  production: true,
  apiUrl: 'https://myportfolio-api.azurewebsites.net/api'
};

Then your Angular service:

import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private http = inject(HttpClient);

  getProducts() {
    return this.http.get(
      `${environment.apiUrl}/products`
    );
  }
}

Production request:

Angular
   ↓
GET
https://myportfolio-api.azurewebsites.net/api/products

3. Push the Angular project to GitHub

A common deployment model is:

Developer
    ↓
GitHub
    ↓
GitHub Actions
    ↓
Azure Static Web Apps

For example:

git add .
git commit -m "Angular production deployment"
git push

Then Azure can use a GitHub Actions workflow to build and deploy the application when changes are pushed.

4. Create Azure Static Web App

In the Azure Portal:

Create a resource
        ↓
Static Web App
        ↓
Create

Configure items such as:

Subscription
Resource Group
Static Web App Name
Hosting Plan
Region
Deployment source
Repository
Branch

If your repository contains the Angular project at its root, the app location could be:

/

If Angular is under:

Frontend/

the app location would correspond to that directory.

The exact build/output settings depend on the Angular project structure and Azure's generated workflow, so verify the generated GitHub Actions configuration rather than assuming a fixed dist path.

5. GitHub Actions deployment

Azure Static Web Apps can create a GitHub Actions workflow in your repository.

Conceptually:

git push
    ↓
GitHub detects change
    ↓
GitHub Actions starts
    ↓
npm install
    ↓
Angular build
    ↓
dist output
    ↓
Deploy to Azure

This gives you a basic CI/CD pipeline.

After deployment, you'll receive an Azure-hosted URL for the Static Web App, and you can configure a custom domain if required.

6. Configure CORS in ASP.NET Core

If Angular is hosted at one origin and the API at another, CORS applies.

For example:

Angular:
https://my-angular-app.example

API:
https://myportfolio-api.azurewebsites.net

Configure ASP.NET Core:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AngularApp", policy =>
    {
        policy
            .WithOrigins(
                "https://my-angular-app.example"
            )
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

Then:

app.UseCors("AngularApp");

A simplified Program.cs:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AngularApp", policy =>
    {
        policy
            .WithOrigins(
                "https://my-angular-app.example"
            )
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseHttpsRedirection();

app.UseCors("AngularApp");

app.UseAuthorization();

app.MapControllers();

app.Run();

For production, allow only the frontend origins you actually need.

7. Angular routing

Suppose Angular has:

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home').then(m => m.Home)
  },
  {
    path: 'products',
    loadComponent: () =>
      import('./products').then(m => m.Products)
  }
];

Opening:

https://example.com/products

must ultimately serve Angular's entry document for a client-side SPA route.

Static hosts therefore need an appropriate SPA fallback/rewrite configuration so that routes such as:

/products
/articles
/contact

can return the Angular entry page and then be interpreted by Angular Router.

The exact configuration depends on the Azure hosting option and Angular rendering mode.

Option 2 — Angular + ASP.NET Core in Azure App Service

You can also serve Angular from ASP.NET Core.

Architecture:

Browser
   ↓
Azure App Service
   ↓
ASP.NET Core
   ├── Angular static files
   └── /api/*
          ↓
       Azure SQL

Angular's generated browser files are placed in:

wwwroot/

For example:

MyApi/
│
├── Controllers/
│
├── wwwroot/
│   ├── index.html
│   ├── main-XXXX.js
│   ├── styles-XXXX.css
│   └── chunk-XXXX.js
│
└── Program.cs

8. ASP.NET Core configuration

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

var app = builder.Build();

app.UseHttpsRedirection();

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("index.html");

app.Run();

Here:

app.UseStaticFiles();

serves Angular's static files.

And:

app.MapFallbackToFile("index.html");

supports Angular SPA routes.

9. Angular API call becomes simpler

If Angular and ASP.NET Core are hosted from the same origin, Angular can use:

getProducts() {
  return this.http.get('/api/products');
}

Suppose the application URL is:

https://myportfolio.azurewebsites.net

Angular UI:

https://myportfolio.azurewebsites.net/

API:

https://myportfolio.azurewebsites.net/api/products

Therefore:

Browser
   ↓
myportfolio.azurewebsites.net
   |
   ├── /products
   │      ↓
   │   Angular
   │
   └── /api/products
          ↓
       ASP.NET Core

Because they share an origin, frontend-to-backend requests in this configuration don't create the same cross-origin CORS requirement.

10. Deploy ASP.NET Core to App Service

Build Angular:

ng build --configuration production

Place/copy the required Angular browser output into ASP.NET Core's:

wwwroot/

Then publish ASP.NET Core:

dotnet publish -c Release

Deploy the published application to:

Azure App Service

Conceptually:

Angular
   ↓
ng build
   ↓
wwwroot

        +

ASP.NET Core
   ↓
dotnet publish

        ↓

Azure App Service

11. Separate vs Combined Azure Deployment

Separate

Azure Static Web Apps
       Angular
          |
          | HTTPS
          ↓
Azure App Service
   ASP.NET Core
          |
          ↓
      Azure SQL

Advantages include independent deployment and scaling.

Combined

Azure App Service
        |
   ASP.NET Core
     /       \
 Angular     API
 wwwroot    /api
               |
               ↓
           Azure SQL

Advantages include a simpler single deployment and straightforward same-origin API calls.

Key Points

1. Angular must normally be built before deployment:

ng build --configuration production

2. The production output is generated under:

dist/

3. A separately hosted Angular SPA can use Azure Static Web Apps.
4. ASP.NET Core Web API can be hosted using Azure App Service.
5. If frontend and API use different origins, configure CORS on the API.
6. Angular can also be served from ASP.NET Core's wwwroot.
7. GitHub Actions can automate build and deployment.
8. Client-side Angular routing requires the hosting platform to handle SPA fallback correctly.
9. Don't put database passwords, API secrets, JWT signing keys, or other server secrets into Angular environment files.
10. Angular environment values become part of client-side code and should be treated as publicly visible configuration.

Interview Questions and Answers

1. How do you deploy Angular to Azure?

Build Angular using:

ng build --configuration production

Then deploy the generated frontend to a service such as Azure Static Web Apps, or serve the Angular build from ASP.NET Core hosted in Azure App Service.

2. What Azure service is suitable for a separately hosted Angular SPA?

Azure Static Web Apps is designed for static frontend applications and supports integrated deployment workflows.

3. Can Angular be deployed to Azure App Service?

Yes. It can be hosted there directly through an appropriate web-host configuration, or its generated files can be served by an ASP.NET Core application deployed to App Service.

4. Where should the ASP.NET Core API be deployed?

A common option is:

Azure App Service

giving an architecture such as:

Angular → Static Web Apps
             ↓
ASP.NET Core → App Service
             ↓
Azure SQL

5. Is CORS required?

If Angular and ASP.NET Core use different origins, the browser's CORS rules apply and the API should allow the required Angular origin.

6. Can Angular and ASP.NET Core be deployed together in Azure?

Yes. Angular's generated static files can be served from ASP.NET Core's wwwroot, and the combined application can be deployed to Azure App Service.

7. Should secrets be stored in Angular environment files?

No.

Angular runs in the browser, so values shipped in its JavaScript bundles can be inspected by users. Keep secrets on the backend, using appropriate server-side configuration such as App Service settings or Azure Key Vault.

8. What is a good interview answer?

Angular can be deployed to Azure by creating a production build with ng build. For a separately hosted SPA, the generated frontend can be deployed to Azure Static Web Apps while ASP.NET Core Web API runs in Azure App Service. Alternatively, Angular's generated files can be served from ASP.NET Core's wwwroot and the combined application deployed to App Service. Cross-origin deployments require appropriate CORS configuration, and client-side secrets must never be stored in Angular configuration.