How to migrate Blazor WebAssembly App to .NET 5

What you will learn:
Steps to migrate existing Blazor WebAssembly application to .NET 5

Step 1: Install the latest version of Visual Studio from the Microsoft website.

Step 2: Change the first line in your Blazor WebAssembly project file (.csproj file) from Microsoft.NET.Sdk.Web to Microsoft.NET.Sdk.BlazorWebAssembly.

Sample Code (Before):

<Project Sdk="Microsoft.NET.Sdk.Web">

  .....
  
</Project>

Sample Code (After):

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  ...
</Project>

Step 3: Change the target framework to .NET 5.

Sample Code (Before):

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netstandard2.1</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>
  
  <ItemGroup>
    ...
  </ItemGroup>

</Project>

Sample Code (After):

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup>
    ...
  </ItemGroup>

</Project>

Step 4: Update other packages to 5.0.0 (Microsoft.AspNetCore.*, System.Net.Http.Json, Microsoft.EntityFrameworkCore, etc.)

Step 5: Remove Microsoft.AspNetCore.Components.WebAssembly.Build from .csproj file.

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />

Step 6: Finally, it looks as below.

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <RazorLangVersion>3.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
  </ItemGroup>

</Project>

We hope you like this article.