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:

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

2. Preparing the Application

2.1 Angular Configuration

  1. Set the base href in angular.json:

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

  1. 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

  1. Install Microsoft.AspNetCore.SpaServices.Extensions:

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions

  1. 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");
        }
    });
}

3. Setting Up Azure Environment

3.1 Azure App Service

  1. Log in to Azure Portal

  2. Create a Resource Group for the app

  3. 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)

"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

  1. Right-click on the project → Publish

  2. Select Azure → Azure App Service (Windows/Linux)

  3. Configure subscription and App Service

  4. Publish the project; Visual Studio handles Angular build and deployment

4.2 Using Azure CLI

  1. Build Angular for production:

cd ClientApp
ng build --configuration production
cd ..

  1. Publish ASP.NET Core app:

dotnet publish -c Release -o ./publish

  1. Create App Service via CLI:

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

  1. Deploy files:

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

4.3 Using GitHub Actions (CI/CD)

  1. 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

  1. 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

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

builder.Configuration.AddEnvironmentVariables();

6. Enabling HTTPS and Custom Domains

app.UseHttpsRedirection();

7. Monitoring and Logging

7.1 Application Insights

builder.Services.AddApplicationInsightsTelemetry();

7.2 Logging

8. Performance Best Practices

  1. Angular Optimization

    • Production build with ng build --prod

    • Lazy load feature modules

    • Use AOT (Ahead-of-Time) compilation

  2. ASP.NET Core Optimization

    • Enable response compression:

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

  1. Database Optimization

    • Use Azure SQL performance recommendations

    • Enable Automatic tuning and Index advisor

9. Scaling and High Availability

10. Troubleshooting Tips

  1. Check App Service logs for deployment errors

  2. Use Kudu Console (https://<app>.scm.azurewebsites.net) for file inspection

  3. Verify Angular files exist in wwwroot

  4. Ensure API URLs are correct in Angular environment files

  5. 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:

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