On November November 10th, 2020 Microsoft the release of .Net 5.0. With .Net 5.0’s release we received a lot of awesome updates to Blazor. In order for us to take advantage of these recent updates we will need to migrate our current app to the new version. We are fortunate that this migration, for our app, will be fairly trivial.
Before you start, you should insure you have the latest (5.0) .Net Framework installed. If you are using Visual Studio, be sure to update to at least version 16.8.0.
The .csproj file
First you will need to navigate to the .csproj, or project, file for your Blazor application. You can see an image of mine below, StarwarsStuff.Ui.csproj.
Open it up, and the first thing you should see is an Xml tag called "Project". Inside that tag You are going to want to change the word "Web" to "BlazorWebAssembly".
Change:
<Project Sdk="Microsoft.NET.Sdk.Web">
To:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
Property Group
Now we need to move to the Property Group tag. Inside here we will have two tags that we are going to need to replace. You can actually remove your RazorLangVersion tag. Then we will replace "netstandard2.1" with "net5.0". Everything is starting to move into one house. No need to have both of these references anymore
Change:
<TargetFramework>netstandard2.1</TargetFramework>
<RazorLangVersion>3.0</RazorLangVersion>
To:
<TargetFramework>net5.0</TargetFramework>
Item Group
Finally we will change out the package references. First we can remove the reference to Microsoft.AspNetCore.Components.WebAssembly.Build. After that you will want to update the rest of your Microsoft assemblies to the corresponding 5.x.x version. I will be updating to 5.0.0 for now. Next you will need to look at your other Package References. You can check out the Nuget page for each one and see what version of their package is compatible with .net 5.0 and upgrade accordingly. I haven’t brought in any external dependencies, so we won’t have that issue here.
Change:
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
<PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
</ItemGroup>
To:
<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>
Verify!
Now we should be able to save our project file. Once we save you can run:
dotnet restore
dotnet watch run
Our app should pull in the new dependencies and start up the application. One of the new features of Blazor is that your browser should automatically open with your application loaded inside of it. After that happens, I’m going to navigate to Count.razor and make a small change.
Change:
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
To:
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount = currentCount + 2;
}
}
Our application should automatically refresh. Blazor has also implemented an auto refresh experience into their framework. This will help developers with a quicker feedback loop while developing their application. If you see gif below. You can see the count incrementing by one, the page then refreshes after we save, and now the count goes up by two. Success!
Be sure to click though the rest of your app to double check for any broken pages, and be sure to enjoy the new improvements to the Blazor stack!
Bryan's Blog 