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
- Microsoft Visual Studio Community (64-bit) – Version 17.0.5
- .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.razor – Implements 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
- Download compiled blazor application, its dependencies and .NET runtime
- 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.
One thought on “Blazor Project structure”