Azure Serverless Template using Angular-standalone, Azure Functions App, Cosmos DB and APIM

I built this template project using Angular17-Standalone, Azure Functions, CosmosDB and APIM, along with MSAL (Microsoft Authentication Library) for authentication and authorization. I hope this will serve as a useful starting point for anyone exploring serverless development and the Microsoft Identity platform.

The integration of MSAL is based on this official MSAL JavaScript template: msal-angular

I created the Angular frontend by following the tutorial on Angualr.dev

The Photos/mages that are being generated are coming from Lorem Picsum

Simple Architecture Diagram

Prerequisites

Make sure to install these development tools and SDKs.

• Azure Developer CLI - for a quick Azure deployment.
• Node.js with npm (18.17.1+) - for Angular installation and SPA development.
• Azure SDK Tools - for wokring with Azure Functions locally and other any Azure services related stuff.
• .NET Runtime
• Angular CLI
• Docker - this is needed when you run azd up locally

How to make this working?

Update environment values

You have to get the ClientId and TenantId from the App Registration page and update this file:

frontend-angular/src/environments/environment.dev.ts

 msalConfig: {
        auth: {
            clientId: <client-id>,
            authority: 'https://login.microsoftonline.com/<tenant-id>'
        }
    }

watch my YouTube video if you want to know how to get the clientId and TenantId How to use the Microsoft Identity Platform with Angular Application

Install Angular dependencies and run

npm install

ng start or ng serve

Update the httpRyanInterceptor to match how you prefer to get an Access Token, which you will then use for Bearer Authorization.

/frontend-angular/src/app/http-ryan.interceptor.ts

//Getting access token from localStorage Session
  let token = localStorage.getItem("<msal.access_token> - this can be different, so I strongly suggest to use the MSAL object to get the correct value"); 
  let secret = token?.split(",")[4].split(":")[1].toString();
  secret = secret?.substring(1, secret.length - 1);
  
  const authToken = secret; 
  // Clone the request and add the authorization header
  const authReq = req.clone({
    setHeaders: {      
      Authorization: `Bearer ${authToken}`
    }
  });

Install CosmosClient dependency

dotnet add package Microsoft.Azure.Cosmos

Update this CosmosDbConfig class. Add the necessary values. Get it from Azure portal.

namespace Serverless.Api
{
    public static class CosmosDbConfig{
        public static readonly string PrimaryKey = "<CosmosDb Primary Key>";
        public static readonly string EndpointUri = "<CosmosDb Endpoint URI>";
        public static readonly string DbName = "<your cosmos-db-name>";
        public static readonly string DbContainerName = "your <cosmos-db-container-name>";
    }
}

Feel free to watch my YouTube video if you want to see how I created different Azure Services for this template project: Serverless Backend API using Azure Functions and Cosmos DB

Docker Build and Run locally

docker build -t angular-with-msal-template .
docker run -d -p 8080:80 angular-with-msal-template

Import Azure Function App to Azure API Management

You can visit this official documentation to learn how to secure and import a Function app to Azure API Management: Import an Azure Function App as an API in Azure API Management

Azure Deployment

Deploying this template project can be easily done using Azure Developer CLI - make sure to install this locally - get it here.

# Make sure to login to your Azure Subscription account by executing this azd command 
azd auth login

# You can still execute this to make sure everything is ok.
azd init

# Provision and deploy to Azure
azd up

# Delete any created servcices/resouces when you don't need it anymore
azd down

Screenshots

Welcome page

List page (local build)