ASP.NET Core  

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

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

  • ClientApp folder contains the Angular project

  • In production, wwwroot hosts the compiled Angular files

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)

  • 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

  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

  • 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

  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();

  • Use caching for static content

  • Minimize server-side rendering work

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

  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:

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

Membership not found