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.