Tips For Building Blazor WebAssembly App In .NET 6 And Visual Studio Code

Introduction

Modern application development is not limited to building Single Page Applications in Angular/React/Vue. These frameworks focus on skills and expertise in Javascript or Typescript for development. With the advancement in application building standards, WebAssembly has come into action where people with knowledge in a Programming language such as C# (.NET), RUST, or C/C++ can build applications that are compiled into WebAssembly and can work as a client application just like any Single Page Applications. Microsoft has Blazor WebAssembly hosting model to allow us to work with WebAssembly using .NET and C#.

Why VS Code and .NET Core CLI?

VS Code is very popular and familiar for developers developing apps in SPA frameworks like Angular, React, etc. So, the purpose is to provide you with the same seamless experience in developing the application. In this tutorial, we are going to cover tips to work using the free and Open Source ecosystem to develop Single Page Applications in Microsoft .NET 6 with the power of C#.

Software and Tools Required

Visual Studio Code
.NET Core CLI
.NET 6 SDK (Currently Preview 4)

Solution Setup

Command	Usage
code.	Open’s Visual Studio Code in Current Directory (Run using the command line)
dotnet new sln	To Create New Solution with the same folder name of the current directory
Dotnet new blazorwasm -o <ProjectName>	To Create a Web Assembly Project
dotnet sln add <ProjectName>.csproj	To Add Project to Solution
dotnet build	To Build the project

Create a folder that will be the name of the solution and Run the “code .” command in the current directory to open VS Code. After that open Integrated Terminal from VS Code and follow along.

Create a folder with the name of your choice (in this case MyWebApp).

Here is the entire output trace window of commands executed.

D:\SampleApps\src>cd MyWebApp

D:\SampleApps\src\MyWebApp>dotnet new sln

Output

The template "Solution File" was created successfully.

D:\SampleApps\src\MyWebApp>dotnet new blazorwasm -o MyWebApp.UI

Output

The template "Blazor WebAssembly App" was created successfully.

This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/6.0-third-party-notices for details.

Processing post-creation actions...

Running 'dotnet restore' on D:\SampleApps\src\MyWebApp\MyWebApp.UI\MyWebApp.UI.csproj...

Determining projects to restore...

Restored D:\SampleApps\src\MyWebApp\MyWebApp.UI\MyWebApp.UI.csproj (in 28.19 sec).

Restore succeeded.

D:\SampleApps\src\MyWebApp>dotnet sln add MyWebApp.UI/MyWebApp.UI.csproj

Output

Project `MyWebApp.UI\MyWebApp.UI.csproj` added to the solution.

Development

These commands will be helpful for development. Must run them from the Integrated Terminal inside the Blazor WebAssembly Project.

Command	Usage	Details
dotnet watch	This will enable hot reloading. Changes will be applied when we refresh the browser.	For example, when changed Index, razor watch: File changed: D:\SampleApps\src\MyWebApp\MyWebApp.UI\Pages\Index.razor. watch: Hot reload of changes succeeded.

Deployment

Command	Usage
dotnet workload install microsoft-net-sdk-blazorwebassembly-aot	This installs workload for AOT compilation. This will compile code to .NET instead of using a .NET IL interpreter. This will improve performance once enabled. Step 1: Add this in .csproj after installing workload <RunAOTCompilation>true</RunAOTCompilation> Step 2: dotnet publish -c Release
dotnet publish -c Release -o <DirectoryPath>	This command is useful when we want to generate the application deployment package.

Common Deployment Pitfalls

Whenever deploying the application, we end up in issue like below,

Failed to find a valid digest in the 'integrity' attribute for resource 'https://<url>/_framework/dotnet.6.0.0-preview.4.21253.7.js' with computed SHA-256 integrity 'sO5oQf0eTOn4//+ePkxLiOLp6DLPeobeRRhMmAlMp+U='. The resource has been blocked.

Resolution

Add this property in-property group,

<PropertyGroup>
...
<BlazorCacheBootResources>false</BlazorCacheBootResources>
</PropertyGroup>

This is the most common solution to resolve the integrity issue.

If not working use .gitattributes file and add * binary if working with git and issue persists.

Summary

We covered the following,

How to create a solution using .NET Core CLI.
Command to use for development i.e. Hot Reloading
Deployment workloads to install and configuration to be used.
Pitfalls for deployment and how to resolve them.

That’s it!! Thanks for Reading. I hope you will find this useful.