Converting A Blazor WASM App To A Blazor Server App

Introduction

Blazor is a web framework developed by Microsoft that allows developers to build web applications using C# and. NET. It provides two hosting models, Blazor WebAssembly (WASM) and Blazor Server, each with advantages and disadvantages. In this article, we will explore the process of converting a Blazor WASM app to a Blazor Server app by creating a new Blazor Server project and adding references to the WASM project.

Overview of Blazor Hosting Models

Before we dive into the conversion process, let's briefly discuss the two Blazor hosting models and their differences.

Blazor WebAssembly

Blazor WASM is a client-side hosting model in which the entire Blazor application is downloaded to the client's web browser and executed there. This means that the application runs entirely in the client's browser without making any requests to the server except for the initial download of the application.

Blazor WASM is ideal for applications that require offline support, fast initial loading times, and good performance on the client side. However, it has some limitations, such as limited support for third-party JavaScript libraries and plugins and less control over the user interface due to the reliance on the client's browser.

Blazor Server

Blazor Server is a server-side hosting model where the application runs on the server and communicates with the client using SignalR. In this model, the client only receives HTML, CSS, and JavaScript from the server, and all the logic and state management is done on the server side.

Blazor Server is ideal for applications that require real-time communication, high security, and full control over the user interface. However, it has some limitations, such as increased network latency, reduced scalability, and increased server load.

Converting a Blazor WASM App to a Blazor Server App

To convert a Blazor WASM app to a Blazor Server app, we need to create a new Blazor Server project and add references to the WASM project.

Step 1. Create a new Blazor Server Project

First, we must create a new Blazor Server project in Visual Studio. To do this, follow these steps:

1. Open Visual Studio and select "Create a new project" from the start page.
2. In the "Create a new project" dialog, select "Blazor App" from the list of project templates.
3. In the "Blazor App" dialog, select "Blazor Server App" as the hosting model.
4. Give your project a name and choose a location to save it.
5. Click "Create" to create the new Blazor Server project.

Step 2. Add References to the WASM Project

Once the Blazor Server project is created, we must add references to the existing Blazor WASM project. To do this, follow these steps:

1. In the Solution Explorer, right-click on the Blazor Server project and select "Add" > "Existing Project".
2. Navigate to the location of the existing Blazor WASM project and select it.
3. Click "Add" to add the project to the Blazor Server solution.
4. Next, we need to add a reference to the WASM project in the Blazor Server project. To do this, right-click on the Blazor Server project and select "Add" > "Reference".
5. In the "Reference Manager" dialog, select "Projects" from the left pane and check the box next to the name of the WASM project.
6. Click "OK" to add the reference to the Blazor Server project.

Step 3. Modify the Startup.cs (or Program. cs) File

The final step is to modify the Startup.cs file in the Blazor Server project to use the WASM project as the startup project. To do this, follow these steps.

1. In the Blazor Server project, open the Startup.cs (or Program. cs) file.

2. In the ConfigureServices method, add the following code to register the services required for the Blazor Server app.

services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();

Or in the case of Program.cs

builder.services.AddRazorPages();
builder.services.AddServerSideBlazor();
builder.services.AddSingleton<WeatherForecastService>();

Here, we are registering Razor Pages and Server-Side Blazor services, as well as a singleton instance of the WeatherForecastService.

3. In the Configure method, add the following code to set up the routing for the app.

app.UseRouting();
app.UseEndpoints(endpoints => {
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

Here, we are mapping the Blazor hub to the endpoints and using a fallback page called "_Host" to handle requests that don't match any other routes.

4. Finally, we need to update the Program.cs file to use the Blazor Server app as the startup project. Open the Program.cs file and replace the contents with the following code.

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;
namespace BlazorServerApp {
    public class Program {
        public static void Main(string[] args) {
            CreateHostBuilder(args).Build().Run();
        }
        public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(webBuilder => {
            webBuilder.UseStartup < Startup > ();
        });
    }
}

Here, we are using the UseStartup method to specify the Startup class for the Blazor Server app.

Step 4. Test the Blazor Server App

1. We can now test the Blazor Server app with all the modifications done. Press F5 to run the app in debug mode.
2. When the app loads, it should look similar to the Blazor WASM app. However, if you open the browser's developer tools and go to the network tab, you should see that the app is making requests to the server, and it will look something like this.
   
3. You might have noticed that earlier, our Blazor WASM application was loading all of the required resources into the browser itself like this.
   
   But now it will make server requests like a Blazor Server application, as shown in the previous point.

Why Convert from Blazor WASM to Blazor Server?

Blazor WASM and Blazor Server both offer advantages and disadvantages, depending on the use case. Blazor WASM is a client-side hosting model where the entire app is downloaded to the browser and executed on the client side. This makes the app faster and more responsive, as there is no need to make server requests for every action.

However, Blazor Server offers a more secure and scalable hosting model. With Blazor Server, the app is executed on the server side, and only the UI updates are sent to the client. This reduces the size of the app and improves security, as the client cannot access the server-side logic. Additionally, Blazor Server offers better scalability, as the server can handle more users than the client-side model.

In summary, the decision to convert from Blazor WASM to Blazor Server depends on the specific requirements of the app. Blazor Server may be the better choice if security and scalability are important.

Conclusion

Converting a Blazor WASM app to a Blazor Server app involves creating a new Blazor Server project, adding references to the WASM project, and modifying the Startup.cs file to use the WASM project as the startup project and test the app. While Blazor WASM and Blazor Server have advantages and disadvantages, the decision to convert from Blazor WASM to Blazor Server depends on the specific requirements of the app. Blazor Server may be the better choice if security and scalability are important.

Overall, Blazor Server offers a more secure and scalable hosting model than Blazor WASM. With Blazor Server, the app is executed on the server side, and only the UI updates are sent to the client, which reduces the size of the app and improves security. Additionally, Blazor Server offers better scalability, as the server can handle more users than the client-side model.

Converting a Blazor WASM app to a Blazor Server app may be a good choice for certain scenarios, and the conversion process is straightforward with the steps outlined in this article.