Table of Contents

• Microsoft Account Information Application
• Application Flow
  • Front-End
  • Back-End
• Architecture
• DevOps
  • Branching
  • Continuous Integration
  • Continuous Delivery

Microsoft Account Information Application

• A basic progressive web application with front-end and back-end to utilize major concepts of Angular, Serverless and Monitoring Application display user profile like image, email and name of logged in user defined in Microsoft Entra ID
• Demo

Application Flow

Front-End

Built with Angular and hosted in Azure Static Web App utilize following frameworks and libraries

• Angular
• Microsoft Authentication Library for OAuth
• @ngneat/elf Client Side State Management
• Jasmine & Karma for Unit Testing
• TypeScript
• Puppeteer and Jest for Automated UI Test
• Playwright for targetting all the browserrs and using C#. (Comming soon)

sequenceDiagram
    autonumber

    actor u as User

    participant l as Login
    participant a as Auhenticate
    participant s as Status
    participant p as Profile
    participant o as Logout
    participant b as Back-End
    
    u->>+l: Browse
    alt is authenticated?
        u->>+s: Logged In
    else is not authenticated
        u->>+a: Authenticate User
        a-->>-l: Authenticated
        l->>+s: Logged In
    end
    
    s->>+b: Fetch Live Subscriptions
    b-->>-s: Display Subscriptions
    s->>+b: Subscribe for push notifications
    b-->>-s: Push notifications subscribed
    u->>+p: View Profile Information
    u->>+o: LogOut Option
    o-->>-u: LoggedOut 

Loading

Back-End

In order to save browser subscription and send push notification following implementation has been used

• Azure Functions to receieve subscriptions from client and also perform unsubscribe
• Azure Cosmos DB to store subscriptions from PWA
• Storage Queue to add notifications in the queue and Azure Function Trigger to send notification
• SignalR to provide live notifications to PWA
• Azure Monitor to store all the logs and expception from applications and monitor the applications

sequenceDiagram
    autonumber

    participant p as Angular (PWA)
    participant g as Microsoft Graph
    participant f as Azure Functions
    participant c as Azure Cosmos DB
    participant q as Azure Queue Storage
    participant s as Azure SignalR
    participant m as Azure Monitor
    
    p->>+g: Fetch user information
    g-->>-p: Return information
    p->>+f: Subscribe push notification
    f->>+q: add subscription to queue
    q->>+c: subscription added to database
    c->>+f: notify for new subscription
    alt success?
        f->>+p: Push notification
    else error
        f->>+q: error notification 
        q->>+m: Log error
    end
    s->>+p: live notifications

Loading

Architecture

flowchart LR    
    ar>App Registration]
    mg[(Microsoft Graph)]
    fd([Azure Front Door])
    swa([Static Web Application])
    af([Azure Functions])
    pn[[Push Notifications]]
    cd[(Azure Cosmos DB)]
    qs{{Queue Storage}}
    kv([Azure Key Vault])
    sr([Azure SignalR])
    ai([Application Insights])
    la[(Log Analytics Workspace)]

    subgraph am[Azure Monitor]
    direction TB
        ai 
        la
    end

    swa --> mg
    ar --> mg
    fd --> swa --> ar
    swa --> af --> cd
    cd --> af --> qs
    qs --> af --> kv
    af --> sr --> swa
    af --> pn --> swa
    swa --> am
    af --> am

Loading

DevOps

• Github Project and Issues to Store all the tasks and issues
• Azure DevOps for Continuous Integration and Delivery. Only main branch is deployed
• Release Annotations to mark release in Application Insights

Branching

Trunk based development has been opted to protect the main branch and short lived branches for new features and bugs

    %%{init: { 'gitGraph': {'mainBranchName': 'main'}} }%%
    gitGraph
       commit
       commit
       branch feature/1
       checkout feature/1
       commit
       commit
       checkout main
       commit
       commit
       branch feature/2
       commit
       checkout main
       merge feature/1
       commit
       merge feature/2
       checkout main
       commit
       commit
       branch bug/3
       checkout bug/3
       commit
       checkout main
       merge bug/3
       commit

Loading

Continuous Integration

Front-End, Back-End and Infrastructure as Code applications are following same process from continuous integration. CodeQL is used for code scanning on every Pull Request

flowchart LR
    cc[Commit] --> ca[Dependecies Cache]
    ca --> rp[Restore Packages]
    rp --> l[Lint]
    l --> b[Build]
    b --> br{main branch?}
    br -->|Yes| p[Artifacts]
    br -->|No| t[Tests]

Loading

Continuous Delivery

---
title: Infrastructure as Code
---
flowchart LR
    a[Download Artifacts] --> d[Deploy Bicep]
    d --> r[Release Annotations]

Loading

---
title: Notification Service (Function Apps)
---
flowchart LR
    a[Download Artifacts] --> d[Deploy Function App]
    d --> r[Release Annotations]

Loading

---
title: Angular PWA
---
flowchart LR
    a[Download Artifacts] --> d[Deploy Static Web App]
    d --> r[Release Annotations]

Loading

---
title: Puppeteer Automated UI Tests
---
flowchart LR
    rp[Restore Packages] --> b[Build]    
    b --> t[Tests]

Loading