To update to a new version of Blazor WebAssembly, you need to follow 4 steps:

  1. Change the target framework.
  2. Upgrade NuGet packages.
  3. Add HeadOutlet to Program.cs.
  4. Modify Blazor “Server” App

Change the target framework

The first step to update Blazor WebAssembly to a newer version is updating the target framework. Right click to your project, select Properties.

Select .NET 6/7 as the target framework.

Upgrade NuGet packages

Once you updated your target framework, you are required to upgrade the NuGet packages as well. Right click on your project, select Manage NuGet packages.

Open Uptades tab and update 2 packages: Microsoft.AspNetCore.Components.WebAssemblyMicrosoft.AspNetCore.Components.WebAssembly.DevServer.

Add HeadOutlet to Program.cs

HeadOutlet is a new component of Blazor WebAssembly .NET 6. It will help you modify the information in the <head> tag easier. Make sure to add HeadOutlet. Open Program.cs and modify the code as follow:

Client\Program.cs

public static async Task Main(string[] args)
{
    ...
    builder.RootComponents.Add<App>("#app");
    builder.RootComponents.Add<HeadOutlet>("head::after");
    ...
}

Modify Blazor “Server” App

Remove Server/Startup.cs

Modify Server/Program.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.ResponseCompression;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();


app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");

app.Run();

Other Changes:

Client\Program.cs

// Local Storage Service.
// builder.Services.AddScoped<ILocalStorageService, LocalStorageService>();
builder.Services.AddBlazoredLocalStorage();

References:

https://blazorschool.com/tutorial/blazor-wasm/dotnet5/update-from-dotnet-5-to-dotnet-6-682674

Last modified: October 8, 2023

Author

Comments

Write a Reply or Comment