Deploying ASP.NET Core + Angular Applications to Azure

A Complete Guide for Developers

Introduction

Building a modern web application using ASP.NET Core as the backend and Angular as the frontend is a popular approach. Once the application is ready, the next crucial step is deployment to a reliable cloud platform. Microsoft Azure provides a rich ecosystem for hosting full-stack applications with features like:

App Services for hosting web apps
Azure SQL Database for relational data
Application Insights for monitoring
DevOps pipelines for CI/CD

This article covers a step-by-step guide to deploy an ASP.NET Core + Angular application to Azure with production-ready practices.

1. Understanding the Architecture

A typical setup for ASP.NET Core + Angular apps looks like this:

[Angular SPA] <---> [ASP.NET Core API] <---> [Database (SQL Server/Azure SQL)]

Key points

Angular is a Single Page Application (SPA) built with ng build
ASP.NET Core serves the Angular static files and provides APIs
Azure App Service hosts the combined backend and frontend
Azure SQL Database stores application data

2. Preparing the Application

2.1 Angular Configuration

Set the base href in angular.json:

"projects": {
  "my-app": {
    "architect": {
      "build": {
        "options": {
          "outputPath": "wwwroot",
          "baseHref": "/"
        }
      }
    }
  }
}

Build the Angular project for production:

ng build --configuration production

This generates static files in dist/my-app. In an ASP.NET Core project, these are served from the wwwroot folder.

2.2 ASP.NET Core Configuration

Install Microsoft.AspNetCore.SpaServices.Extensions:

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions

Configure Startup.cs to serve Angular:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
        }
    });
}

ClientApp folder contains the Angular project
In production, wwwroot hosts the compiled Angular files

3. Setting Up Azure Environment

3.1 Azure App Service

Log in to Azure Portal
Create a Resource Group for the app
Create an App Service:
- Runtime: .NET 7 / 8 (match your ASP.NET Core version)
- Region: closest to your users
- SKU: Standard or Premium for production

3.2 Azure SQL Database (Optional)

Create a managed SQL database
Configure firewall rules for access from App Service
Update appsettings.json connection string:

"ConnectionStrings": {
  "DefaultConnection": "Server=tcp:<your-server>.database.windows.net,1433;Initial Catalog=MyDatabase;User ID=<username>;Password=<password>;Encrypt=True;"
}

4. Deployment Strategies

There are multiple ways to deploy ASP.NET Core + Angular apps to Azure:

4.1 Using Visual Studio

Right-click on the project → Publish
Select Azure → Azure App Service (Windows/Linux)
Configure subscription and App Service
Publish the project; Visual Studio handles Angular build and deployment

4.2 Using Azure CLI

Build Angular for production:

cd ClientApp
ng build --configuration production
cd ..

Publish ASP.NET Core app:

dotnet publish -c Release -o ./publish

Create App Service via CLI:

az webapp create --resource-group MyResourceGroup --plan MyAppServicePlan --name MyAngularApp --runtime "DOTNET:8.0"

Deploy files:

az webapp deploy --resource-group MyResourceGroup --name MyAngularApp --src-path ./publish

4.3 Using GitHub Actions (CI/CD)

Create a .github/workflows/azure-deploy.yml file:

name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-dotnet@v3
        with:
          dotnet-version: '8.0.x'
      - name: Build Angular
        run: |
          cd ClientApp
          npm install
          npm run build -- --configuration production
      - name: Publish .NET
        run: dotnet publish -c Release -o ./publish
      - name: Azure WebApp Deploy
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'MyAngularApp'
          slot-name: 'production'
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: ./publish

Add publish profile as a GitHub secret from Azure App Service → Get Publish Profile

This automates deployments on every push to main.

5. Configuring Environment Variables

Use appsettings.Production.json for production settings
Angular environment:

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

Inject environment variables in ASP.NET Core:

builder.Configuration.AddEnvironmentVariables();

6. Enabling HTTPS and Custom Domains

Azure App Service provides free SSL certificates
Bind a custom domain in App Service → Custom domains
Enable HTTPS redirection in ASP.NET Core:

app.UseHttpsRedirection();

7. Monitoring and Logging

7.1 Application Insights

Enable Application Insights in Azure
Track:
- Response times
- Exceptions
- User metrics
Configure in ASP.NET Core:

builder.Services.AddApplicationInsightsTelemetry();

7.2 Logging

Use Serilog or built-in logging
Logs can be sent to:
- Azure Monitor
- Log Analytics Workspace

8. Performance Best Practices

Angular Optimization
- Production build with ng build --prod
- Lazy load feature modules
- Use AOT (Ahead-of-Time) compilation
ASP.NET Core Optimization
- Enable response compression:

builder.Services.AddResponseCompression();
app.UseResponseCompression();

Use caching for static content
Minimize server-side rendering work

Database Optimization
- Use Azure SQL performance recommendations
- Enable Automatic tuning and Index advisor

9. Scaling and High Availability

Azure App Service supports scaling out (multiple instances)
Use Deployment Slots for blue-green deployment
Enable Auto-scaling based on CPU/memory

10. Troubleshooting Tips

Check App Service logs for deployment errors
Use Kudu Console (https://<app>.scm.azurewebsites.net) for file inspection
Verify Angular files exist in wwwroot
Ensure API URLs are correct in Angular environment files
Use Azure Portal diagnostics for performance bottlenecks

Conclusion

Deploying an ASP.NET Core + Angular application to Azure can be straightforward with proper planning. Key takeaways:

Build Angular production files into wwwroot
Use Azure App Service for hosting both backend and frontend
Configure environment-specific settings
Implement CI/CD pipelines for automated deployments
Monitor, log, and optimize performance

Following these steps ensures a production-ready, scalable, and maintainable application on Azure.