Exploring Blazor WebAssembly App Project Structure

Blazor WebAssembly

In this blog post, we will take a look into the Blazor WebAssembly App Project Structure and try to understand the folder layout and what the different files represent and what they do. If you are new to ASP.NET Core Blazor application, then I would highly recommend you to go through the introductory post on Blazor Applications.

Quick Introduction to Blazor Application

Blazor is a new framework provided by Microsoft to build interactive client-side web applications using C# programming language and Razor syntax on top of the .NET Core framework. The beauty of this framework is that the developer need not know any javascript and can leverage the existing .NET Core frameworks and its associated NuGet packages to power the Blazor application.

The developer can build a Blazor application that can be deployed on the server termed Blazor Server App or can be deployed directly inside the client browsers as a WebAssembly termed as Blazor WebAssembly App. Here, we are going to explore the project structure of the Blazor WebAssembly App.

How to create Blazor WebAssembly App in Visual Studio 2019

The Blazor Application is created using Visual Studio 2019, .NET Core v3.1, and WebAssembly.Templates::3.2.0. At the time of writing Blazor WebAssembly is currently in preview.

Prerequisite:

  1. Visual Studio 2019, free community edition can be downloaded here
  2. .NET Core 3.1 SDK, download here.
  3. Download Blazor WebAssembly template using the following dotnet-cli code:
# run the following command in the command line

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

Steps to create and display the Blazor WebAssembly application

  1. Open Visual Studio 2019.
  2. Select “Create a New Project” from the “Get Started” list on the “Startup Page
  3. Select “Blazor App” from the template list and click the “Next” button.
  4. Give a “Project name“, here I have given “BlazorWebAssemblyApp” as the name and click “Create“. (Let the other options be of default values)
  5. Now select “Blazor WebAssembly App” from the list of available templates and click “Create” leaving all the other options as it is.
  6. Select or open the Solution Explorer (Ctrl+Alt+L) to view the Blazor application project structure.

Quick video on how to create the Blazor WebAssembly App in Visual Studio 2019

How to create Blazor WebAssembly Application in Visual Studio 2019

Blazor WebAssembly App Project Structure – Description

The details of the project structure can be seen in the solution explorer, the explorer displays all the projects related to a single solution. Lets us understand every single item in the project tree list.

Blazor WebAssembly Application Project Structure
Blazor WebAssembly App Project Structure

Connected Services:

This node contains the detail about all the service references added to the project. A new service can be referred here, for example, if you want to add access to Cloud Storage of Azure Storage you can add the service here.

Dependencies:

The Dependencies node contains all the references of the NuGet packages used in the project. Here the Frameworks node contains a reference to the NETStandard.Library. The Packages node contains references to the WebAssembly packages the System.Net.Http.Json.

Properties:

This properties node contains a launchSettings.json file containing configuration details about what action to perform when the application is executed and contain details like IIS Express settings, application URLs, authentication, SSL port details, etc

wwwroot

This is the webroot folder of the application and all the static files being used in the project are stored and served from here. Images, CSS and javascript files if you need it.

The index.html is the root page of the application, this page specifies where the root app component is rendered and it is also returned whenever any page in the app is initially requested. The index.html page also holds the reference to the _framework/blazor.webassembly.js JavaScript which downloads the .NET runtime, the application, and its dependencies as well as initializes the application to run.

Pages

This folder contains the routable Razor components or pages (views) containing the description of the view and logic to handle user interactions.

Shared

This folder contains Razor components or views that are common across the project.

_Imports.razor

This file contains all the using statements or the Razor directives to include in the components of the application.

App.razor

This is the root component of the application, the routing mechanism of the application can be found in this file. The component receives user requests and renders the matching page on the client’s browser.

Program.cs

This class is the entry point of the web application. It builts the host and configures it. The root component of the application is specified in this class as well as all the service can be registered here.

I hope the article helped you in understanding ASP.NET Core 3.0 Blazor WebAssembly App Project Structure, thanks for visiting. Cheers!!!

[ Further readings: Introduction to Blazor Server Application  |  How to consume REST API in Blazor Application |  How to call JavaScript in Blazor Application  |  Blazor Application Lifecycle methods  |  Top 5 Blazor Component Libraries  |  Creational Design Patterns  |  Builder Design Pattern in C#  |  Microsoft .NET Framework Version History  |  Important Global Visual Studio 2019 Shortcuts ]

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments