Blazor Project structure
10 Apr

Blazor Project structure

In this article we are going to discuss the files and folders in ASP.Net Core Blazor project. Please refer my previous article to grab the Blazor overview.

For this article I have used the below tools

  1. Microsoft Visual Studio Community (64-bit) – Version 17.0.5
  2. .NET 6.0

Let us start with the file Program.cs

Program.cs

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

Blazor Server Project

  • Here the Main () method calls WebApplication.CreateBuilder(args); – which sets up the ASP.NET Core host

Blazor WebAssembly Project

  • The Main () method calls WebAssemblyHostBuilder.CreateDefault(args); – which create the host.

Since Startup.cs has been removed from .NET 6.0, Dependency Injection, middleware components etc will be configured in this file.

Wwwroot

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

App.razor

This is the root component of the application. It sets up client-side routing using the built-in component called Router. this component intercepts browser navigation and renders the page that matches the request address. This component uses two properties – Found and NotFound

Found – to display the content when a match is found

NotFound – to display the message – “Sorry, there’s nothing at this address”, when there no matching found.

Pages Folder

Contains _Host razor page and the routable components that make up Blazor app.

_Host.cshtml – this is the root page. When any page of the app is initially requested, this page is rendered and returned in response.

_layout.cshtml – the layout page for the root page _host.cshtml

Counter.razor – Implements the Counter page.

Error.razor – Rendered when an unhandled exception occurs.

FetchData.razorImplements the fetch data page.

Index.razor – implements the home page.

The route for each page is specified using the directive – @page

Shared

This folder contains the following shared components and stylesheets.

MainLayout.razor – this is application’s main component.

NavMenu.razor – using this component, sider navigation will be implemented. NavLink component, renders navigation links to other razor components such as Index, Counter and FetchData components. This NavLink helps users to recognize which page currently displayed.

NavMenu.razor.css – this page contains stylesheets for the navigation menu.

SurveyPrompt.razor – this is the blazor survey component.

_Imports.razor

This file contains the common namespaces, so we do not need to include them in each razor components.  This can be achieved using the directive @using. This is one of the features in .NET 6.0 called global using directive.

Wwwroot/index.html

This is the root page in Blazor WebAssembly and is implemented as html page. When a first request hits the application, this is the page which is initially requested and rendered in the response.  This page contains a section <div id=”app”>Loading…</div> where the app component is rendered.

This page has the below JavaScript reference –

<script src=”_framework/blazor.webassembly.js”></script>

This file has the below responsibilities

  1. Download compiled blazor application, its dependencies and .NET runtime
  2. Initialize the runtime to run the blazor app in the browser.

Data

This folder exists only in Blazor server project. Contains code files related to the sample WeatherForecast service.

Appsettings.json

This file contains Configuration settings like an asp.net core mvc projects.

For more details regarding the project structure. Please refer the Microsoft documentation.

Blazor Server  Blazor WebAssembly are two different ways we can host a Blazor application. Everything in Blazor application is razor components.

About the Author

One thought on “Blazor Project structure