Project Structure Of Blazor WebAssembly Project In ASP.NET Core 7.0

Introduction

In this article, I am going to explain to you, the default folder structure of BlazorWebAssembly App in ASP.NET Core 7.0 web application and describe the purpose of each folder.

Read my previous articles, using the below links.

• Getting Started With Blazor In ASP.NET Core 7.0
• How To Create Blazor WebAssembly Project In ASP.NET Core 7.0

In my previous 2 articles, we created “Blazor Server App” and “Blazor WebAssembly App” project in ASP.NET Core 7.0 and structure of the Blazor WebAssembly App project as shown in the following image.

Let’s start exploring each folder and file that exists in the Project Structure for Easy understanding.

Project Folder Structure Description

The details of the default project structure can be seen in the solution explorer, it displays all the projects related to a single solution.

.csproj File

Double click on the project name in Solution Explorer to open .csproj file in the editor or Right-click on the project and then click on Edit Project File in order to edit the .csproj file. As shown in the following image.

Once clicked on Edit Project File, .csproj file will be opened in Visual Studio as shown below. Where you can see the target Framework net7.0, by default Nullanle and ImplicitUsings are enabled.

Connected Services

It contains details about all the service references added to the project. A new service can be added here, for example, if you want to add access to Cloud Storage of Azure Storage you can add the service here. As shown in the following image.

Dependencies

The Dependencies node contains all the references of the NuGet packages used in the project. Here the Frameworks node contains reference two most important dotnet core runtime and asp.net core runtime libraries. Project contains all the installed server-side NuGet packages, as shown below.

Properties

Properties folder contains a launchSettings.json file, which contains all the information required to lunch the application. Configuration details about what action to perform when the application is executed and contains details like IIS settings, application URLs, authentication, SSL port details, etc.

WWWroot Folder

This is the webroot folder and it contains all the static files required by the project are stored and served from here. The webroot folder contains a sub-folder to categorize the static file types, like all the Cascading Stylesheet files are stored in the CSS folder, and the external libraries like bootstrap, Images, etc. wwwroot folder as shown below.

Pages Folder

The Pages folder contains the components/pages that can be routed from the Blazor application. The route for each page is determined using the @page directive. The component has a .razor extension.

Blazor WebAssembly app project has three files, those are Index.razor, Counter.razor, and FetchData.razor, and will be executed when selecting a menu Home, Counter, and Fetch data.

Counter.razor

It Implements the counter page.

FetchData.razor

It Implements the fetch data page.

Index.razor

It Implements the Home page.

Shared Folder

It contains other UI components in the form of .razor files that are used together in applications.

• MainLayout.razor: Application Main layout components.
• MainLayout.razor.css: Stylesheet for the application's main layout.
• NavMenu.razor: It implements the sidebar navigation menu. Components NavLink creates navigation links to other Razor components. The component NavLink highlights the selected navigation menu item; it helps the user to know which component is currently displayed.
• NavMenu.razor.css: Stylesheet for the application navigation menu.
• SurveyPrompt.razor: It is the Blazor Survey components.

_Imports.razor

• This file contains the list of common namespaces that use @using directives so that it doesn't have to include it in every razor component.
• The following are the contents of the file_Imports.razor in the Blazor WebAssembly project.

App.razor

• This file is the application’s root component that manages client-side routing using the Router component.
• The contents are the same for the Blazor Server and Blazor WebAssembly projects.

• The Router component renders pages that match the requested address.
• The router uses the Found property to display content when a match is found.
• If a match is not found, the NotFound property is used to display the message, Sorry, there's nothing at this address.

Program.cs

This class is the entry point of the Blazor Server application. It contains Main() method.  It contains the service registrations and request processing pipeline configuration.

The Main() method determines the basic components of the application. The component is in the App.razor file.

Conclusion

In this article we explained, the Project Structure of Blazor WebAssembly project in ASP.NET Core 7.0. I hope this article is useful to understand.