How can I use Blazor for my project?

Question

Hello everyone,

I just heard about BLAZOR and try to understand how to use BLAZOR for my project. What I want to do: Deliever a webpage with a database behind and a mobile app. Normally I would create

1. A ASP.NET application for the frontend,
2. a Mini-API for the connection to the database,
3. a Xamarin/MAUI app for the mobile phones.
4. a AZURE database (not sure which, since I only worked with on-premise MSSQL and the Dataverse).

IF I understand BLAZOR correct, I would only code that one time, and not 3 different things. A BLAZOR app would be delivered as a web app and as a mobile app.

1. But how do I make sure, if the mobile BLAZOR app goes offline (for some reason), that it syncs again?
2. And how can I connect with BLAZOR to the database?
3. Does it still need an API?
4. How do I deliever BLAZOR for mobile and web?
5. Which AZURE database is recommended to use?

My questions maybe sound stupid, but I was not able to find an answer. Any help will be appreciated.

Answer 1

Hi @Bernhard Sumser !

Blazor is a framework for building web applications using C# and .NET. It allows you to build web applications that run on the client-side, using WebAssembly, rather than running on the server and sending updates to the client.

1. One way to handle offline scenarios with Blazor WebAssembly (client-side) apps is to use service workers and a browser's caching capabilities. You can use libraries like Workbox for this. In addition, you can also use browser storage APIs like IndexedDB to store data locally on the device and synchronize it with the server when the app comes back online.
2. Blazor supports various data access methods, such as Entity Framework Core and the ASP.NET Core Data Protection APIs to connect with a database. You can use the database of your choice, including the Azure SQL Database or Cosmos DB.
3. In most cases, you will still need an API to handle data access and business logic on the server-side, unless you choose to use something like gRPC or SignalR to build real-time communication directly between the client and the server.
4. Blazor WebAssembly is designed to run on both mobile and desktop web browsers. To deliver it to mobile, you'll need to host your application on a web server and make it available via a URL, just like a regular web application. To improve the user experience on mobile, you can also use Progressive Web App (PWA) features, such as web app manifests, service workers, and the ability to install the app on the home screen.
5. For the database Azure SQL Database is a good choice, if you are familiar with it. Cosmos DB is also a great option, especially if you need a globally distributed, multi-model database.

Overall Blazor can be a great choice for your scenario, but it may not be the right choice for every project. It's important to consider the requirements of your project and compare them to the capabilities of Blazor to make sure it's a good fit.

Answer 2

there are really three blazor hosting modes.

blazor server, in which a web server hosts and runs the blazor code. the blazor code is hosted being a signal/r hub and uses memory and server memory for the life of the connection. the blazor code can access any resource available to the web server.

blazor client (wasm). the blazor code is hosted by the browser. the code runs in a sandbox, and can only access resources via javascript. there is a httpclient that wraps th javascript network access. typically ajax is used to access resources. can use service workers (javascript) and be installed as a PWA (actually the page that hosts blazor is installed as a PWA.

blazor hybrid. the blazor code is hosted by a MAUI app (typically mobile, but could be desktop). the blazor code can call code in the maui app, co can access any resource the maui app can. this is because maui app exposes an api to the hosted blazor.

there is really no offline support for blazor server. if the connection is lost, the app shuts down an must be reloaded. both client and mobile will run when disconnected, but currently you need to write the sync code. typically a javascript service worker for client and custom code for mobile.

note: if using blazor client hosted in azure, you can use an azure static web app and the site can proxy to azure functions to implement the api:

https://azure.microsoft.com/en-us/products/app-service/static/

Answer 3

Hi @Tasadduq Burney !

Thank you very much for your quick response and very helpful answer.

2. Is this the "Blazor Server App" ? When I create a new project in Visual Studio 2022 I see "Blazor Server app" and "Blazor WebAssembly App". The "Blazor Server App" has in the description "... handles user interactions over a SignalR connection)
3. Is this PWA feature enabled by default?
4. For the beginning I would require a small database. There is no requirement for global distribution. It should only be able to store data by not producing a lot of costs, and can scale later. Is Azure SQL still a good way to go?

The more I learn, the more I like Blazor. But as you can read, I still struggle with the understanding. The difference of "Blazor Web App" and "Blazor WebAssembly App" is not clear to me if both are delievered as web apps (or has only the "Blazor WebAssembly App" the PWA feature?).

Answer 4

Now I understand it. Thank you a lot. :)

Answer 5

So, I did the learn path Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps yesterday and have a question regarding to my project. In the tutorial I've learned that a Blazor Webassembly app hosted as Azure static web app does work together with Api and Azure functions.

When I create a new project in Visual Studio 2022 I have the option ASP.NET Core Hosted. Is this required for my project, if I start fresh? Should, or can I use the Azure function to get the data from the Azure SQL? Putting the pieces together, I see two scenarios, but I don't know which one is best practice or valid:

1. User opens page => Blazor WebAssembly => Request => Api => Azure Function => Azure SQL
2. User opens page => Blazor WebAssembly => Request => Blazor Server(?) => Entity Framework(?) => Azure SQL

But which one would be the best? The option ASP.NET Core Hosted is a bit confusing for me. Do I need the Entity Framework?

Another question:

In the tutorial everything was inside the project and there was no database behind. When I debug my project in Visual Studio on my local machine, should I directly access the Azure SQL or is there some way of mocked database that I keep local? Old fashioned way I would directly access the SQL Server that is in my own network. But with Azure I want to learn the correct way to do it.

Update

If read through a lot of articles and it seems like that hosted does create a second project called Server which is basically a API. The question is, if I need that, or if Azure Functions are enough.

For my second answer, I guess it is possible to use the Api with Azure Functions that is used by the Azure static web app to get data from the database. Please correct me if I am wrong.

Update 2

Please don't answer on this article. After many tries I struggle in the detail and opened a question about it here Can Blazor Webassembly use EntityFramework without the hosting option?. The main question is solved.