MYPIBLOGs

Nowadays, I used vs code to build .net core applications. Today i try to create a demo project of blazor webassebmly application using vs code in .net5.

Why is blazor WebAssembly?

We can run c# code directly in browser using WebAssembly. We can re-use code and libraries from server-side parts of our application, becaouse .NET running on WebAssembly now.

Blazore webassembly approxmately decreased the dependencies on javascripts or js frameworks. It is one .NET SPA(single page application).

Blazor webassembly .net core hosted:

we create blazor webassembly, it creates client project only, means fronted web pages.So when we need some server side or backend server data to perfom or some kind of data access like external APIs for data, Application-specific database, etc. For this purpose we create blazor WebAssembly .NET core hosted model.

Lets create  the demo project.

Setting up development environment:

Visual Studio:

You need visual studio 2019, which install minimum requirement for blazor server or blazor webassembly. you will able to work on it.Still recommends to install latest .net framework on it.

VS Code:

Need to install latest version of .Net SDK (.NET5 SDK) to work on blazor webassembly. If you have already installed you can just check it by executing below command line.

   dotnet --version  

Results:

For a Blazor WebAssembly .Net core hosted , execute the following commands in a command shell:

Step2:

 dotnet new blazorwasm -ho -o demoproject 

-ho: .net hosted model

-o : Project Name

When we execute above command, it will create project structure like below:

Client:

It contains page UI components that will be rendered in the browser,like Blazor components, Razor pages, Client side css libraries and Master Layout, Services (Services are used to call .NET Core Api).

Server: 

It contains the server-side ASP.NET Core Features code such as  APIs and repositories,DB-related operations, EF Core, Api Controllers.

Shared:

It contains the shared code, entity model classes, that can be accessed by both client and server.

Benefits of .Net core hosted WebAssembly:

Server will have API endpoints that can be accessed by the Client Project. It is a single application and runs on the same port, hence the need for CORS access doesn’t arise.

All these projects will be executed directly on your browser and do not need a dedicated server for api or backedn data access.

Step3:

Restore the created solutions using below commands.

cd demoproject

 dotnet restore 

Step4:

dotnet build

Step 5:

Selecting project to run:

cd client

dotnet run

it launches the in browser. like below/:

When you click on fetch data menu, then it will give you error like in above pic or like below text.

Blazor Webassembly .net core Error: An unhandled error has occurred. Reload

Microsoft.AspNetCore.Components. WebAssembly.Rendering. WebAssemblyRenderer[100]

      Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.

System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0. .. etc

New Step 5:

Select Server project as startup

In command shell:

 cd server 

 dotnet run 

in pic:

We hit the localhost url. No any error will come(Webapi server needs to run then its service will captured in client project).

In above page of console area, we can see the dotnet dll instead of js objects and functions. It is the magic of blazor WebAssembly in .NET.