Introduction to The Frontend's Contract: Building Backends for Frontends with Vue.js, .NET Core & Azure

At some point, most frontend teams hit the same wall. The backend exposes what it knows — resources, entities, service boundaries — and the frontend is left stitching four API calls into a single screen, massaging data shapes the UI never asked for, and writing adapter logic that has no good place to live. The Backend for Frontend pattern is the answer to that wall. But it comes with a cost: an additional service to build, deploy, and own. This series makes the case for that trade-off — and equally, for the cases where it is not worth making. The examples and architecture decisions throughout are drawn from a production implementation built for a Norwegian enterprise in the education sector. Where the original system cannot be described in full, concepts have been generalised to meet NDA obligations — but the engineering trade-offs, the failure modes, and the decisions that shaped the final design are real.

"Every frontend eventually outgrows the API it was given. The BFF pattern is not about adding a layer — it's about taking ownership of the interface between your product and its backend, on your terms. This series is for engineers who want to understand the trade-offs before they commit to the architecture."

Series Guideline

Part I: Foundations (Concepts and Architecture)

• Article 1: What Is BFF — and When Is It Actually Worth It?
  The problem it solves, the cost it introduces, and the honest answer on when not to use it.

• Article 2: Designing the BFF Contract: Request Aggregation & Client-Specific Shaping
  API design principles, response shaping, versioning strategy, and what belongs in the BFF vs upstream services.

• Article 3: BFF vs API Gateway vs GraphQL: Picking the Right Abstraction
  Comparative analysis with real trade-offs. Where each pattern wins, where it falls over, and how they can coexist.

Part II: Implementation (Code)

• Article 4: Building the BFF in .NET Core: Minimal APIs, Routing & Aggregation
  Standing up the BFF service, aggregating upstream calls, shaping responses, and handling errors with real code.

• Article 5: The Vue 3 API Layer: Composables, Error Boundaries & Type Safety
  Building a clean, typed client-BFF contract in Vue 3. useApi composables, error handling strategies, and OpenAPI codegen.

• Article 6: Auth at the Boundary: Integrating Feide Identity via the BFF
  Connecting the BFF to Feide — Norway's government-issued identity provider for educational organisations. OAuth 2.0 + OIDC flow, the Token Handler pattern, and why cookie-based sessions beat tokens in the browser.

• Article 7: Shipping to Azure: Docker Images, Artifact Publishing & Azure Container Instances
  Full IaaS deployment pipeline — building and tagging Docker images, publishing artifacts, and running the BFF on Azure Container Instances. Includes Azure Front Door routing and when API Management adds value vs noise.

Part III: Production & Operations (Ops)

• Article 8: Testing the BFF: Unit, Integration & Contract Tests
  A layered testing strategy for the BFF. WebApplicationFactory for integration tests, Pact for consumer-driven contract testing with Vue.

• Article 9: Observability: Structured Logging, Distributed Tracing & Azure Application Insights
  End-to-end traceability across Vue → BFF → upstream services using Azure Application Insights. Correlation IDs, structured logs with Serilog, custom telemetry, and Application Insights dashboards and alerts.

Supplementary articles

• Caching in the BFF: In-Memory, Redis & Response Caching
  Where caching belongs in a BFF architecture, how to avoid stale-data bugs, and cache invalidation patterns.

• Brownfield Migration: The Strangler Fig Approach to BFF Adoption
  Incrementally introducing a BFF in front of an existing monolith or REST API without a big-bang rewrite.

• Resilience Patterns: Circuit Breakers, Retries & Timeouts with Polly
  Making the BFF fault-tolerant using Polly. Handling partial upstream failures gracefully in aggregated responses.

☰ Series navigation