Blazor Project Structure

Blazor Project Structure

In this article, I am going to discuss Blazor Project Structure in detail. Please read our previous article, where we discussed the Blazor Hosting Models. At the end of this article, you will understand the need and use of different files and folders of Blazor application.

ASP.NET Core Blazor Project Structure:

In our part 3 of this article series, we created one solution with two project. The following is the structure.

ASP.NET Core Blazor Project Structure

Now, let us discuss the files and folders one by one.

Program.cs

This file contains the Main() method which is the entry point for both the project types (i.e Blazor WebAssembly and Blazor Server).

In a Blazor server project, the Main() method calls CreateHostBuilder() method which sets up the ASP.NET Core host.

In a Blazor WebAssembly project, the App component, which is the root component of the application, is specified in the Main method. This root component is present in the root project folder in App.razor file.

Components are the building blocks of a Blazor application. We will discuss everything you need to know build effective and reusable blazor components in our upcoming videos. For now, just understand the App component is the root component of the application.

wwwroot

For both the project types, this folder contains the static files like images, stylesheets etc.

App.razor

This is the root component of the application. It uses the built-in Router component and sets up client-side routing. It is this Router component that intercepts browser navigation and renders the page that matches the requested address. The Router uses the Found property to display the 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.

Pages folder

This folder contains the _Host razor page and the routable components that make up the Blazor app. The components have the .razor extension.

  1. Index component (Index.razor) – Rendered when we navigate to the root application URL.
  2. Counter component (Counter.razor) – Rendered when we navigate to the path /counter.
  3. FetchData component (FetchData.razor) – Rendered when we navigate to the path /fetchdata.
  4. Error component (Error.razor) – Rendered when an unhandled exception occurs in the blazor app.
Shared folder

As the name implies, contains the shared components

MainLayout component (MainLayout.razor)

The application’s main layout component

NavMenu component (NavMenu.razor)

Implements the navigation menu on the sidebar. NavLink component, renders navigation links to other Razor components like the index, counter and fetchdata components. This NavLink component is intelligent enough to highlight the navigation menu item, if it’s component is currently displayed.

_Imports.razor

This is like the _ViewImports.cshtml file in an asp.net core MVC project. This file contains the common namespaces so we do not have to include them in every razor component.

wwwroot/index.html

This is the root page in a Blazor WebAssembly project and is implemented as an html page. When a first request hits the application, it is this page, that is initially served. It has the standard HTML, HEAD and BODY tags. It specifies where the root application component App.razor should be rendered. You can find this App.razor root component in the root project folder. It is included on the page as an HTML element <app>.

This index.html page also loads the blazor WebAssembly JavaScript file (_framework/blazor.webassembly.js). It is this file that is responsible for downloading

The compiled blazor application, it’s dependencies and the .NET runtime. It also initializes the runtime to run the blazor app in the browser

Startup.cs

This file is present only in the Blazor Server project. As the name implies it contains the applications’s startup logic. The Startup class contains the following two methods.

ConfigureServices – Configures the applications DI i.e dependency injection services. For example AddServerSideBlazor() method adds Blazor server side services. On the IServiceCollection interface there are several methods that start with the word Add. These methods add different services for the Blazor application. We can even add our own services to the DI container. We will see this in action in our upcoming videos.

Configure – Configures the app’s request processing pipeline. Depending on what we want the Blazor application to be capable of doing we add or remove the respective middleware components from request processing pipeline. For example, UseStaticFiles() method adds the middleware component that can server static files like images, css etc.

MapBlazorHub sets up the endpoint for the SignalR connection with the client browser.

Pages/_Host.cshtml

This is the root page of the application and is specified by calling MapFallbackToPage(“/_Host”) method. It is implemented as a razor page.

It is this page, that is initially served when a first request hits the application. It has the standard HTML, HEAD and BODY tags. It also specifies where the root application component, App component (App.razor) must be rendered. Finally, it also loads the blazor.server.js JavaScript file, which sets up the real-time SignalR connection between the server and the client browser. This connection is used to exchange information between the client and the server. SignalR, is a great framework for adding real-time web functionality to apps.

Data folder (Blazor Server)

Contains code files related to the sample WeatherForecast service

appsettings.json (Blazor Server)

Just like an asp.net core mvc project, a blazor project also uses this file to store the Configuration settings.

Here, in this article, I try to explain the Blazor Project Structure in Detail. I hope now you got some idea regarding the files and folders of ASP.NET Core Blazor App.

Leave a Reply

Your email address will not be published. Required fields are marked *