Creating blazor WebAssembly.net core hosted app in vs code.
3/1/2021 3:06:44 PM
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.
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:
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.
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.
For a Blazor WebAssembly .Net core hosted , execute the following commands in a command shell:
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:
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).
It contains the server-side ASP.NET Core Features code such as APIs and repositories,DB-related operations, EF Core, Api Controllers.
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.
Restore the created solutions using below commands.
Selecting project to 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
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:
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.
0 Comments on this post
Comments(0)||Login to Comments
- see more..
Issues Resolved (2)
Sitecore 9.3 (1)
International Business (1)
Innovations in Industries (3)
Supply Chain Management (1)
Industrial Engineering (12)
Sitecore 10 (3)
Cloud Computing (1)
Online Courses (1)
Online Resources (2)
Blazor WebAssembly (2)
Sitecore form (1)
MS Sql Server (1)
Angular 11 (2)
Automobile Engineering (4)