Blazor: Zero To Hero Real Time Implementation Part IV

Introduction 

This is part four of the “Blazor: Zero to Hero” article series. Before getting into the Part III article series, let’s have a Glimpse at Part I, Part II and Part III articles, 

Part I

• Blazor is a framework to build Interactive Web UIs using C# and HTML. 
• The initial release was in 2018 by Microsoft.   
• We can use C# code in the Client-Side programming, and WebAssembly will handle browsers to understand the C# code. 
• We need .NET CORE SDK 3.1 or latest 
• Visual Studio 2017 or the latest can be used as the IDEs. 

Part II

• Microsoft launched the first version of Blazor in 2019 along with .NET CORE 3.0
• There are two hosting models as Client-Side and Server-Side. 
• Client-Side is also known as Blazor WebAssembly, the application runs directly on the web browsers and all the required components are downloaded from Server to Client. 
• In Server-Side, the application is run directly on the Server-Side.

Part III

• In this article, we had a detailed look on the Blazor Server Side Application’s Project Structure.

Please visit for complete article, 

• Blazor: Zero To Hero – Part 1 
• Blazor: Zero To Hero – Part 2
• Blazor: Zero To Hero – Part 3

In this article, we will have a detailed look at the Blazor Web Assembly‘s Project structure

Project Structure

Creating Client Side Blazor Project

Click Visual Studio, and it shows options as Clone or Check out code, Open a new project or solution, Open a local folder,  Create a new project, as shown in the below. 

Choose to Create a new project option

Once the Create a new project option is chosen, another window will be opened with a list of project template options. In that window, Choose the Blazor App option. (Only if you have installed Blazor, this option will be suggested) 

After that, another window will be opened to configure the application, such as Project Name, and where the application will be saved in the machine. I am naming my Project as FinanceApp in the Project Name option and I create the application by selection Create button

Click Create button, and in the next window you can see only the option to create Blazor Server Side project (at this moment). This is because, the Client Side project is still in preview stage(At the moment of writing article). But still we can develop Client Side Project by Installing NuGet Package.

Please visit this site to get the latest Blazor Client Side Project template. Copy the latest version and execute the below command in your Command Prompt

dotnet new --install Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4

Open your Command Prompt and paste the above code and press enter button.

Once after successful installation, your command prompt shows as below.

After this successful installation, its always better to restart your Machine. Once after restart, open your Visual Studio and follow the instruction from Picture 1 to Picture 4, as mentioned in this article.

Now just below the Blazor Server App, you could see Blazor WebAssembly App, which is our Client Side project. Select that option and create project.

I have created a sample Test application to view the folders in the Client Blazor Application.

This how our Solution Explorer looks like, and we do not have more folder as like Server Side Application. As discussed in the Part II article, Client Side project, the application runs directly in the browser on WebAssembly, and all required is the Complied Application, DOT NET Runtime, and Dependencies are downloaded to the Client from the Server. 

Now let’s launch the browser console tool, and go the network tab, and we can see all the files downloaded in the browser from the server.

Conclusion

In this article we had a look at how to Create Client Side project by installing the NuGet Package, and also viewed the files downloaded in the browser console from server. I hope you found this article useful. Please feel free to share your feedback in the comment section.