> Markdown version of [/videos/115-blazor-and-azure-functions-for-serverless-website](https://www.wearedevelopers.com/videos/115-blazor-and-azure-functions-for-serverless-website). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Blazor and Azure functions for Serverless Website

Eliminate steep hosting fees and skip JavaScript frameworks entirely. Deploy Blazor WebAssembly on Azure Storage and integrate Azure Functions for a secure, fully serverless C# backend.

- **Speakers:** Menaka Baskerpillai
- **Event:** WeAreDevelopers LIVE
- **Published:** March 3, 2021
- **Duration:** 20:15
- **URL:** https://www.wearedevelopers.com/videos/115-blazor-and-azure-functions-for-serverless-website

## Summary

Blazor WebAssembly empowers C# backend developers to build interactive frontend applications natively in the browser, eliminating the need to adopt new JavaScript frameworks. While traditional server-based hosting works fine, scaling standard web architectures to support geographically distributed users often leads to steep virtual machine and app service expenses. Transitioning to a serverless web architecture solves this by hosting the compiled Blazor WebAssembly files directly within an Azure Storage account. By enabling the static website feature and uploading application assets to the `$web` container, developers achieve a remarkably low-cost, high-throughput frontend solution.

Since a static client cannot safely retain secure credentials or perform direct database operations, Azure Functions operates as the necessary backend layer. Firing on demand, HTTP-triggered functions act as an API bridge, securely querying the database and returning necessary payloads to the static Blazor application. Integrating these distinct platforms significantly lowers resource consumption, though it reliably triggers Cross-Origin Resource Sharing (CORS) complications. Resolving this restriction requires explicitly defining the Blazor frontend's URL within the allowed origins of the Azure Function's CORS configuration dashboard.

Deploying this ecosystem smoothly requires anticipating a few specific framework and hosting constraints. Developers must routinely verify that the storage account's configured index document precisely matches the uploaded frontend file name, as mismatches will prevent the application from loading. Furthermore, because global exception handling in Blazor single-page applications is inherently limited, engineers should utilize traditional `try/catch` paradigms at the individual component level to track errors effectively. Aided by the architectural stability introduced since .NET 5, combining Blazor WebAssembly and Azure Functions delivers exceptional production readiness without relying on dedicated, always-on servers.

**Keywords:** blazor webassembly, azure functions API, serverless web architecture, azure storage static website, c# frontend development, CORS configuration, component-level error handling, .net production readiness, SPA backend integration, serverless database connectivity, azure blob container, HTTP triggers, hosting cost reduction, cloud static endpoints

## Chapters

1. **Introduction to serverless websites with Blazor and Azure Functions** (00:17) — Integrating Blazor with Azure Functions allows C# developers to build frontend applications without managing a dedicated server.
1. **Choosing between server and WebAssembly deployment models** (02:27) — Choosing WebAssembly over a traditional server architecture allows rendering to happen entirely within the user's browser.
1. **Limitations of the standard web server architecture** (03:43) — Standard server deployments introduce latency issues and higher resource costs when scaling applications across multiple geographical zones.
1. **Designing a serverless web architecture for frontend applications** (05:11) — Routing application assets directly from Azure cloud storage removes the need for active servers while safely maintaining backend connections.
1. **Configuring an Azure storage account for static websites** (08:00) — Activating the static website feature on an Azure blob container automatically configures primary endpoints for serving web traffic.
1. **Deploying the Blazor application to an Azure web container** (09:55) — Uploading compiled Blazor project assets directly into the storage container makes the application accessible through generated web endpoints.
1. **Connecting a Blazor application to an Azure Function backend** (13:13) — Deploying an Azure function API endpoint provides a secure method to query database resources and pass credentials to the frontend.
1. **Resolving common CORS restrictions and target framework deployment errors** (15:35) — Defining allowed origins resolves cross-origin resource sharing errors while setting the proper framework target fixes common compiler crashes.
1. **Handling unhandled errors in Blazor single-page web applications** (19:28) — Building individual component-level try-catch block architectures is necessary to natively capture unhandled exceptions in single-page applications.

## Related Moments

- [Unifying frontend and backend development with ASP.NET Core Blazor](https://www.wearedevelopers.com/videos/699-blazor-the-new-spa-framework-for-everyone-who-hates-javascript) (from "Blazor – the new SPA Framework for everyone who hates JavaScript")
- [Introduction to Blazor for seamless web development](https://www.wearedevelopers.com/videos/1564-blazor-unleashed-the-future-of-net-web-development) (from "Blazor Unleashed: The Future of .NET Web Development")
- [Hosting models for executing Blazor applications across different platforms](https://www.wearedevelopers.com/videos/699-blazor-the-new-spa-framework-for-everyone-who-hates-javascript) (from "Blazor – the new SPA Framework for everyone who hates JavaScript")
- [Hosting modern static web apps on Azure](https://www.wearedevelopers.com/videos/390-debugging-static-web-apps) (from "Debugging Static Web Apps")
- [Combining serverless compute with Azure blob storage](https://www.wearedevelopers.com/videos/47-functions-triggers-using-azure-event-grids-in-azure-blob-storage) (from "Functions Triggers using Azure Event Grids in Azure Blob Storage")
- [Integrating endpoints with Azure Static Web Apps](https://www.wearedevelopers.com/videos/1194-say-goodbye-to-building-boring-apis-with-azure-data-api-builder) (from "Say goodbye to building boring APIs with Azure Data API Builder")

## Related Articles

- [What Are The Top Skills Required For Azure Developers?](https://www.wearedevelopers.com/magazine/77-what-are-the-top-skills-required-for-azure-developers)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 132 - Binging WADFlix?](https://www.wearedevelopers.com/magazine/473-dev-digest-132-binging-wadflix)

## Related Jobs

- [Backend Entwickler C#/.NET iv.)](https://www.wearedevelopers.com/jobs/ext/1262419-backend-entwickler-c-net-iv) at **Bosch-Gruppe Österreich**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer,Billing](https://www.wearedevelopers.com/jobs/ext/1991843-senior-software-engineer-billing) at **GitHub**