Serverless Architecture with Angular and ASP.NET Core

Introduction

Serverless architecture is a modern way to build applications without worrying about managing servers. The cloud provider automatically handles scaling, availability, and maintenance.

With ASP.NET Core, you can write backend logic as serverless functions (e.g., Azure Functions or AWS Lambda), and Angular can consume these APIs to build a responsive frontend.

In this tutorial, we will see how to build a serverless full-stack application using Angular and ASP.NET Core (as Azure Functions), along with SQL Server for data storage.

Why Serverless Architecture?

No need to manage or maintain servers.
Automatic scaling based on demand.
Pay only for the execution time (cost-efficient).
Fast deployment and easy integration with cloud services.

Architecture Diagram

  
    +----------------+       HTTP / REST / Event       +----------------------+
 |  Angular App   | <----------------------------> | Azure Functions      |
 |  (Frontend)    |                                 | (ASP.NET Core API)  |
 +----------------+                                 +----------------------+
        ^                                                   |
        |                                                   |
        +------------------ Database (Azure SQL / SQL Server) ----------+

Explanation

Angular frontend sends API requests to serverless functions.
ASP.NET Core serverless functions process requests and interact with SQL Server.
Functions scale automatically based on incoming requests.
Optional: Event-driven architecture for tasks like sending emails, notifications, or processing background jobs.

Step 1. Create Azure Functions ( ASP.NET Core Backend)

Install Azure Functions Core Tools:

  
    npm install -g azure-functions-core-tools@4

Create a new HTTP-triggered Azure Function project:

  
    func init ServerlessApp --dotnet
cd ServerlessApp
func new --name GetItems --template "HTTP trigger" --authlevel "anonymous"

Sample Function ( GetItems.cs ):

  
    using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using System.Collections.Generic;

namespace ServerlessApp
{
    public static class GetItems
    {
        [FunctionName("GetItems")]
        public static IActionResult Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "items")] HttpRequest req)
        {
            var items = new List<string> { "Item1", "Item2", "Item3" };
            return new OkObjectResult(items);
        }
    }
}

Step 2. Angular Frontend Integration

Create Angular service ( serverless.service.ts ):

  
    import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServerlessService {
  private apiUrl = 'https://<your-function-app>.azurewebsites.net/api/items';

  constructor(private http: HttpClient) {}

  getItems(): Observable<string[]> {
    return this.http.get<string[]>(this.apiUrl);
  }
}

Consume API in app.component.ts :

  
    import { Component, OnInit } from '@angular/core';
import { ServerlessService } from './serverless.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  items: string[] = [];

  constructor(private serverlessService: ServerlessService) {}

  ngOnInit() {
    this.serverlessService.getItems().subscribe(data => this.items = data);
  }
}

Display in app.component.html :

  
    <div>
  <h2>Serverless Items List</h2>
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>
</div>

Step 3. Run and Deploy

Run locally:

  
    func start
ng serve

Deploy to Azure:

  
    func azure functionapp publish <YourFunctionAppName>

Angular frontend can call deployed functions directly.

Step 4. Advanced Features

Event-driven functions for background tasks.
Integration with Azure Storage, Service Bus, or Cosmos DB.
Secure API using Azure AD authentication.
Logging and monitoring with Application Insights.

Conclusion

Serverless architecture simplifies backend management and scales automatically. Using ASP.NET Core serverless functions with an Angular frontend, you can build cost-efficient, scalable, and fast full-stack applications.