How can I use Blazor for my project? - Microsoft Q&A (2023)

2023-01-10T07:38:08.977+00:00

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.

Sign in to comment

1. 

   Bruce (SqlWork.com) 28,031Reputation points

   2023-01-10T17:14:27.787+00:00

   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/

   1. 

      Bernhard Sumser 101Reputation points

      2023-01-11T14:03:18.6+00:00

      Thanks Bruce! That's some interesting information.

   See Also

   Tutorial: Create an Angular app that uses the Microsoft identity platform for authentication using auth code flow - Microsoft EntraWalkthrough: Compiling a Native C++ Program on the Command LineAzure Hybrid Benefit for Windows Server

   Sign in to comment

   (Video) Parameters and Sharing Data [8 of 11] | Blazor for Beginners

2. 

   Bernhard Sumser 101Reputation points

   (Video) Using Blazor in a Microsoft Excel add-in

   2023-01-10T08:54:25.74+00:00

   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?).

   1. 

      Tasadduq Burney 7,181Reputation points • Microsoft MVP

      2023-01-10T09:00:09.19+00:00

      Blazor has two main hosting models: Blazor Server and Blazor WebAssembly.

      1. Blazor Server is a server-side hosting model for Blazor applications, it uses a SignalR connection to handle user interactions and updates the UI on the client side. With Blazor Server, the application's logic and state is maintained on the server, and the UI is updated in real-time as the user interacts with the application. When you create a new project in Visual Studio 2022 and select "Blazor Server App" it will automatically set the project up with the necessary dependencies and configuration for a Blazor Server application.
      2. The Progressive Web App (PWA) feature is not enabled by default in a Blazor Server App. PWAs are web applications that can be installed on a user's device and can be accessed offline. Blazor WebAssembly app, on the other hand, is designed to run on the client-side, it runs entirely in the browser using WebAssembly and has the ability to work offline.
      3. Azure SQL is a good way to store data for a small database, it offers a variety of options for different use cases and can scale as your needs grow. Azure SQL is a fully managed service, so you don't have to worry about managing the underlying infrastructure. Additionally, you can use the Azure SQL database to store data for your Blazor Server and Blazor WebAssembly app.

   Sign in to comment

3. 

   Bernhard Sumser 101Reputation points

   2023-01-10T12:05:00.51+00:00

   (Video) Blazor Tips and Tricks

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

   0No comments

   Sign in to comment

4. 

   Bernhard Sumser 101Reputation points

   2023-01-14T10:37:58.8966667+00:00

   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.

   0No comments

   Sign in to comment

Sign in to answer