Introduction
In this article, we will learn how to implement Azure serverless with Blazor web assembly. And to do that, we will create an app that lists out some Frequently Asked Questions (FAQ) on Covid-19.
Here’s what we will cover:
- We will create an Azure Cosmos DB which will act as our primary database to store questions and answers.
- We will use an Azure function app to fetch data from cosmos DB.
- We will deploy the function app to Azure to expose it globally via an API endpoint.
- And lastly, we will consume the API in a Blazor web assembly app.
The FAQs will be displayed in a card layout with the help of Bootstrap.
The Covid-19 FAQ app is deployed on Azure. See it in action at https://covid19-faq.azurewebsites.net/
What is a serverless architecture?
In traditional applications such as a 3-tier app, a client requests resources from the server, and the server processes the request and responds with the appropriate data.
However, there are some issues with this architecture. We need a server running continuously. Even if there are no requests, the server is present 24X7, ready to process the request. Maintaining server availability is cost-intensive.
Another problem is scaling. If the traffic is huge, we need to scale out all the servers which can be a cumbersome process.
An effective solution to this problem is serverless web architecture. The client makes a request to a file storage account instead of a server. The storage account returns the index.html page along with some code that needs to be rendered on the browser.
Since there is no server to render the page, we are relying on the browser to render the page. All the logic to draw the element or update the element will run in the browser. We do not have any server on backend – we just have a storage account with a static asset.
This is a cost-effective solution as we do not have any server, just some static files in a storage account. It is also very easy to scale out for heavy load websites.
What is an Azure function?
Making the browser run all the logic to render the page seems exciting, but it has some limitations.
We do not want the browser to make database calls. We need some part of our code to run on the server-side such as connecting to a database.
This is where Azure functions come in handy. In a serverless architecture, if we want some code to run the server-side, then we use an Azure function.
Azure functions are an event-driven serverless compute platform. You need to pay only when execution happens. They are also easy to scale. Hence, we get both the scaling and the cost benefits with Azure functions.
To learn more you can refer to the Azure function official docs.
Why should you use Azure serverless?
An Azure serverless solution can add value to your product by minimizing the time and resources you spend on infrastructure-related requirements.
You can increase developer productivity, optimize resources and accelerate the time to market with the help of a fully managed, end-to-end Azure serverless solution.
To learn more, see the Azure serverless official doc.
What is Blazor?
Blazor is a .NET web framework for creating client-side applications using C#/Razor and HTML.
Blazor runs in the browser with the help of WebAssembly. It can simplify the process of creating a single page application (SPA). It also provides a full-stack web development experience using .NET.
Using .NET for developing Client-side application has multiple advantages:
- .NET offers a range of API and tools across all platforms that are stable and easy to use.
- The modern languages such as C# and F# offer a lot of features that make programming easier and interesting for developers.
- The availability of one of the best IDE in the form of Visual Studio provides a great .NET development experience across multiple platforms such as Windows, Linux, and macOS.
- .NET provides features such as speed, performance, security, scalability, and reliability in web development that makes full-stack development easier.
Why should you use Blazor?
Blazor supports a wide array of features to make web development easier for us. Some of the prominent features of Blazor are:
- Component-based architecture: Blazor provides us with a component-based architecture to create rich and composable UI.
- Dependency injection: This allows us to use services by injecting them into components.
- Layouts: We can share common UI elements (for example, menus) across pages using the layouts feature.
- Routing: We can redirect the client request from one component to another with the help of routing.
- JavaScript interop: This allows us to invoke a C# method from JavaScript, and we can call a JavaScript function or API from C# code.
- Globalization and localization: The application can be made accessible to users in multiple cultures and languages
- Live reloading: Live reloading of the app in the browser during development.
- Deployment: We can deploy the Blazor application on IIS and Azure Cloud.
To learn more about Blazor, please refer to the official Blazor docs.
#azure #serverless #blazor #webassembly #developer
