ASP.NET Core Blazor project structure
Note
This isn't the latest version of this article. For the current release, see the .NET 8 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see .NET and .NET Core Support Policy. For the current release, see the .NET 8 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 8 version of this article.
This article describes the files and folders that make up a Blazor app generated from a Blazor project template.
Blazor Web App
Blazor Web App project template: blazor
The Blazor Web App project template provides a single starting point for using Razor components (.razor
) to build any style of web UI, both server-side rendered and client-side rendered. It combines the strengths of the existing Blazor Server and Blazor WebAssembly hosting models with server-side rendering, streaming rendering, enhanced navigation and form handling, and the ability to add interactivity using either Blazor Server or Blazor WebAssembly on a per-component basis.
If both client-side rendering (CSR) and interactive server-side rendering (interactive SSR) are selected on app creation, the project template uses the Interactive Auto render mode. The automatic rendering mode initially uses interactive SSR while the .NET app bundle and runtime are downloaded to the browser. After the .NET WebAssembly runtime is activated, rendering switches to CSR.
By default, the Blazor Web App template enables both static and interactive server-side rendering using a single project. If you also enable Interactive WebAssembly rendering, the project includes an additional client project (.Client
) for your WebAssembly-based components. The built output from the client project is downloaded to the browser and executed on the client. Components using the Interactive WebAssembly or Interactive Auto render modes must be located in the .Client
project.
The component folder structure of the .Client
project differs from the Blazor Web App's main project folder structure because the main project is a standard ASP.NET Core project. The main project must take into account other assets for ASP.NET Core projects that are unrelated to Blazor. You're welcome to use whatever component folder structure you wish in the .Client
project. You're free to mirror the component folder layout of the main project in the .Client
project if you wish. Note that namespaces might require adjustments for such assets as layout files if you move components into different folders than the project template uses.
More information on components and render modes is found in the ASP.NET Core Razor components and ASP.NET Core Blazor render modes articles.
Based on the interactive render mode selected at app creation, the Layout
folder is either in the server project in the Components
folder or at the root of the .Client
project. The folder contains the following layout components and stylesheets:
- The
MainLayout
component (MainLayout.razor
) is the app's layout component. - The
MainLayout.razor.css
is the stylesheet for the app's main layout. - The
NavMenu
component (NavMenu.razor
) implements sidebar navigation. The component includesNavLink
components (NavLink), which render navigation links to other Razor components. The NavLink component indicates to the user which component is currently displayed. - The
NavMenu.razor.css
is the stylesheet for the app's navigation menu.
The Routes
component (Routes.razor
) is either in the server project or the .Client
project and sets up routing using the Router component. For client-side interactive components, the Router component intercepts browser navigation and renders the page that matches the requested address.
The Components
folder of the server project holds the app's server-side Razor components. Shared components are often placed at the root of the Components
folder, while layout and page components are usually placed in folders within the Components
folder.
The Components/Pages
folder of the server project contains the app's routable server-side Razor components. The route for each page is specified using the @page
directive.
The App
component (App.razor
) is the root component of the app with HTML <head>
markup, the Routes
component, and the Blazor <script>
tag. The root component is the first component that the app loads.
An _Imports.razor
file in each of the server and .Client
projects includes common Razor directives for Razor components of either project, such as @using
directives for namespaces.
The Properties
folder of the server project holds development environment configuration in the launchSettings.json
file.
Note
The http
profile precedes the https
profile in the launchSettings.json
file. When an app is run with the .NET CLI, the app runs at an HTTP endpoint because the first profile found is http
. The profile order eases the transition of adopting HTTPS for Linux and macOS users. If you prefer to start the app with the .NET CLI without having to pass the -lp https
or --launch-profile https
option to the dotnet watch
(or dotnet run
) command, simply place the https
profile above the http
profile in the file.
The wwwroot
folder of the server project is the Web Root folder for the server project that holds the app's public static assets.
The Program.cs
file of the server project is the project's entry point that sets up the ASP.NET Core web application host and contains the app's startup logic, including service registrations, configuration, logging, and request processing pipeline:
- Services for Razor components are added by calling AddRazorComponents. AddInteractiveServerComponents adds services to support rendering Interactive Server components. AddInteractiveWebAssemblyComponents adds services to support rendering Interactive WebAssembly components.
- MapRazorComponents discovers available components and specifies the root component for the app (the first component loaded), which by default is the
App
component (App.razor
). AddInteractiveServerRenderMode configures interactive server-side rendering (interactive SSR) for the app. AddInteractiveWebAssemblyRenderMode configures the Interactive WebAssembly render mode for the app.
The app settings files (appsettings.Development.json
, appsettings.json
) in either the server or .Client
project provide configuration settings. In the server project, settings files are at the root of the project. In the .Client
project, settings files are consumed from the Web Root folder, wwwroot
.
In the .Client
project:
The
Pages
folder contains routable client-side Razor components. The route for each page is specified using the@page
directive.The
wwwroot
folder is the Web Root folder for the.Client
project that holds the app's public static assets.The
Program.cs
file is the project's entry point that sets up the WebAssembly host and contains the project's startup logic, including service registrations, configuration, logging, and request processing pipeline.
Additional files and folders may appear in an app produced from a Blazor Web App project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor Server
Blazor Server project templates: blazorserver
, blazorserver-empty
The Blazor Server templates create the initial files and directory structure for a Blazor Server app:
- If the
blazorserver
template is used, the app is populated with the following:- Demonstration code for a
FetchData
component that loads data from a weather forecast service (WeatherForecastService
) and user interaction with aCounter
component. - Bootstrap frontend toolkit.
- Demonstration code for a
- If the
blazorserver-empty
template is used, the app is created without demonstration code and Bootstrap.
Project structure:
Data
folder: Contains theWeatherForecast
class and implementation of theWeatherForecastService
that provides example weather data to the app'sFetchData
component.Pages
folder: Contains the Blazor app's routable Razor components (.razor
) and the root Razor page of a Blazor Server app. The route for each page is specified using the@page
directive. The template includes the following:_Host.cshtml
: The root page of the app implemented as a Razor Page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The Host page specifies where the root
App
component (App.razor
) is rendered.
Counter
component (Counter.razor
): Implements the Counter page.Error
component (Error.razor
): Rendered when an unhandled exception occurs in the app.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.appsettings.json
and environmental app settings files: Provide configuration settings for the app.Program.cs
: The app's entry point that sets up the ASP.NET Core host and contains the app's startup logic, including service registrations and request processing pipeline configuration:- Specifies the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the
WeatherForecastService
is added to the service container for use by the exampleFetchData
component. - Configures the app's request handling pipeline:
- MapBlazorHub is called to set up an endpoint for the real-time connection with the browser. The connection is created with SignalR, which is a framework for adding real-time web functionality to apps.
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.
- Specifies the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the
Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor Server project template: blazorserver
The Blazor Server template creates the initial files and directory structure for a Blazor Server app. The app is populated with demonstration code for a FetchData
component that loads data from a registered service, WeatherForecastService
, and user interaction with a Counter
component.
Data
folder: Contains theWeatherForecast
class and implementation of theWeatherForecastService
that provides example weather data to the app'sFetchData
component.Pages
folder: Contains the Blazor app's routable Razor components (.razor
) and the root Razor page of a Blazor Server app. The route for each page is specified using the@page
directive. The template includes the following:_Host.cshtml
: The root page of the app implemented as a Razor Page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The Host page specifies where the root
App
component (App.razor
) is rendered.
_Layout.cshtml
: The layout page for the_Host.cshtml
root page of the app.Counter
component (Counter.razor
): Implements the Counter page.Error
component (Error.razor
): Rendered when an unhandled exception occurs in the app.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.appsettings.json
and environmental app settings files: Provide configuration settings for the app.Program.cs
: The app's entry point that sets up the ASP.NET Core host and contains the app's startup logic, including service registrations and request processing pipeline configuration:- Specifies the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the
WeatherForecastService
is added to the service container for use by the exampleFetchData
component. - Configures the app's request handling pipeline:
- MapBlazorHub is called to set up an endpoint for the real-time connection with the browser. The connection is created with SignalR, which is a framework for adding real-time web functionality to apps.
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.
- Specifies the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the
Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor Server project template: blazorserver
The Blazor Server template creates the initial files and directory structure for a Blazor Server app. The app is populated with demonstration code for a FetchData
component that loads data from a registered service, WeatherForecastService
, and user interaction with a Counter
component.
Data
folder: Contains theWeatherForecast
class and implementation of theWeatherForecastService
that provides example weather data to the app'sFetchData
component.Pages
folder: Contains the Blazor app's routable Razor components (.razor
) and the root Razor page of a Blazor Server app. The route for each page is specified using the@page
directive. The template includes the following:_Host.cshtml
: The root page of the app implemented as a Razor Page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The Host page specifies where the root
App
component (App.razor
) is rendered.
Counter
component (Counter.razor
): Implements the Counter page.Error
component (Error.razor
): Rendered when an unhandled exception occurs in the app.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.appsettings.json
and environmental app settings files: Provide configuration settings for the app.Program.cs
: The app's entry point that sets up the ASP.NET Core host.Startup.cs
: Contains the app's startup logic. TheStartup
class defines two methods:ConfigureServices
: Configures the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and theWeatherForecastService
is added to the service container for use by the exampleFetchData
component.Configure
: Configures the app's request handling pipeline:- MapBlazorHub is called to set up an endpoint for the real-time connection with the browser. The connection is created with SignalR, which is a framework for adding real-time web functionality to apps.
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.
Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor Server project template: blazorserver
The Blazor Server template creates the initial files and directory structure for a Blazor Server app. The app is populated with demonstration code for a FetchData
component that loads data from a registered service, WeatherForecastService
, and user interaction with a Counter
component.
Data
folder: Contains theWeatherForecast
class and implementation of theWeatherForecastService
that provides example weather data to the app'sFetchData
component.Pages
folder: Contains the Blazor app's routable Razor components (.razor
) and the root Razor page of a Blazor Server app. The route for each page is specified using the@page
directive. The template includes the following:_Host.cshtml
: The root page of the app implemented as a Razor Page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The Host page specifies where the root
App
component (App.razor
) is rendered.
Counter
component (Counter.razor
): Implements the Counter page.Error
component (Error.razor
): Rendered when an unhandled exception occurs in the app.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components:MainLayout
component (MainLayout.razor
): The app's layout component.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.appsettings.json
and environmental app settings files: Provide configuration settings for the app.Program.cs
: The app's entry point that sets up the ASP.NET Core host.Startup.cs
: Contains the app's startup logic. TheStartup
class defines two methods:ConfigureServices
: Configures the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and theWeatherForecastService
is added to the service container for use by the exampleFetchData
component.Configure
: Configures the app's request handling pipeline:- MapBlazorHub is called to set up an endpoint for the real-time connection with the browser. The connection is created with SignalR, which is a framework for adding real-time web functionality to apps.
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.
Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Standalone Blazor WebAssembly
Standalone Blazor WebAssembly project template: blazorwasm
The Blazor WebAssembly template creates the initial files and directory structure for a standalone Blazor WebAssembly app:
- If the
blazorwasm
template is used, the app is populated with the following:- Demonstration code for a
Weather
component that loads data from a static asset (weather.json
) and user interaction with aCounter
component. - Bootstrap frontend toolkit.
- Demonstration code for a
- The
blazorwasm
template can also be generated without sample pages and styling.
Project structure:
Layout
folder: Contains the following layout components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). The route for each page is specified using the@page
directive. The template includes the following components:Counter
component (Counter.razor
): Implements the Counter page.Index
component (Index.razor
): Implements the Home page.Weather
component (Weather.razor
): Implements the Weather page.
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Note
The
http
profile precedes thehttps
profile in thelaunchSettings.json
file. When an app is run with the .NET CLI, the app runs at an HTTP endpoint because the first profile found ishttp
. The profile order eases the transition of adopting HTTPS for Linux and macOS users. If you prefer to start the app with the .NET CLI without having to pass the-lp https
or--launch-profile https
option to thedotnet watch
(ordotnet run
) command, simply place thehttps
profile above thehttp
profile in the file.wwwroot
folder: The Web Root folder for the app containing the app's public static assets, includingappsettings.json
and environmental app settings files for configuration settings and sample weather data (sample-data/weather.json
). Theindex.html
webpage is the root page of the app implemented as an HTML page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The page specifies where the root
App
component is rendered. The component is rendered at the location of thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
).
Program.cs
: The app's entry point that sets up the WebAssembly host:- The
App
component is the root component of the app. TheApp
component is specified as thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
inwwwroot/index.html
) to the root component collection (builder.RootComponents.Add<App>("#app")
). - Services are added and configured (for example,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
).
- The
Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor WebAssembly
Blazor WebAssembly project templates: blazorwasm
, blazorwasm-empty
The Blazor WebAssembly templates create the initial files and directory structure for a Blazor WebAssembly app:
- If the
blazorwasm
template is used, the app is populated with the following:- Demonstration code for a
FetchData
component that loads data from a static asset (weather.json
) and user interaction with aCounter
component. - Bootstrap frontend toolkit.
- Demonstration code for a
- If the
blazorwasm-empty
template is used, the app is created without demonstration code and Bootstrap.
Project structure:
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). The route for each page is specified using the@page
directive. The template includes the following components:Counter
component (Counter.razor
): Implements the Counter page.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
) (ASP.NET Core in .NET 7 or earlier): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets, includingappsettings.json
and environmental app settings files for configuration settings. Theindex.html
webpage is the root page of the app implemented as an HTML page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The page specifies where the root
App
component is rendered. The component is rendered at the location of thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
).
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.Program.cs
: The app's entry point that sets up the WebAssembly host:- The
App
component is the root component of the app. TheApp
component is specified as thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
inwwwroot/index.html
) to the root component collection (builder.RootComponents.Add<App>("#app")
). - Services are added and configured (for example,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
).
- The
Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
- "Client": The Blazor WebAssembly app.
- "Server": An app that serves the Blazor WebAssembly app and weather data to clients.
- "Shared": A project that maintains common classes, methods, and resources.
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
- The "Server" project includes a weather forecast controller at
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project'sFetchData
component. - The "Shared" project includes a weather forecast class at
WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.
Blazor WebAssembly
Blazor WebAssembly project template: blazorwasm
The Blazor WebAssembly template creates the initial files and directory structure for a Blazor WebAssembly app. The app is populated with demonstration code for a FetchData
component that loads data from a static asset, weather.json
, and user interaction with a Counter
component.
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). The route for each page is specified using the@page
directive. The template includes the following components:Counter
component (Counter.razor
): Implements the Counter page.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets, includingappsettings.json
and environmental app settings files for configuration settings. Theindex.html
webpage is the root page of the app implemented as an HTML page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The page specifies where the root
App
component is rendered. The component is rendered at the location of thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
).
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.Program.cs
: The app's entry point that sets up the WebAssembly host:- The
App
component is the root component of the app. TheApp
component is specified as thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
inwwwroot/index.html
) to the root component collection (builder.RootComponents.Add<App>("#app")
). - Services are added and configured (for example,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
).
- The
Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
- "Client": The Blazor WebAssembly app.
- "Server": An app that serves the Blazor WebAssembly app and weather data to clients.
- "Shared": A project that maintains common classes, methods, and resources.
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
- The "Server" project includes a weather forecast controller at
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project'sFetchData
component. - The "Shared" project includes a weather forecast class at
WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.
Blazor WebAssembly
Blazor WebAssembly project template: blazorwasm
The Blazor WebAssembly template creates the initial files and directory structure for a Blazor WebAssembly app. The app is populated with demonstration code for a FetchData
component that loads data from a static asset, weather.json
, and user interaction with a Counter
component.
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). The route for each page is specified using the@page
directive. The template includes the following components:Counter
component (Counter.razor
): Implements the Counter page.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components and stylesheets:MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets, includingappsettings.json
and environmental app settings files for configuration settings. Theindex.html
webpage is the root page of the app implemented as an HTML page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The page specifies where the root
App
component is rendered. The component is rendered at the location of thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
).
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.Program.cs
: The app's entry point that sets up the WebAssembly host:- The
App
component is the root component of the app. TheApp
component is specified as thediv
DOM element with anid
ofapp
(<div id="app">Loading...</div>
inwwwroot/index.html
) to the root component collection (builder.RootComponents.Add<App>("#app")
). - Services are added and configured (for example,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
).
- The
Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
- "Client": The Blazor WebAssembly app.
- "Server": An app that serves the Blazor WebAssembly app and weather data to clients.
- "Shared": A project that maintains common classes, methods, and resources.
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
- The "Server" project includes a weather forecast controller at
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project'sFetchData
component. - The "Shared" project includes a weather forecast class at
WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.
Blazor WebAssembly
Blazor WebAssembly project template: blazorwasm
The Blazor WebAssembly template creates the initial files and directory structure for a Blazor WebAssembly app. The app is populated with demonstration code for a FetchData
component that loads data from a static asset, weather.json
, and user interaction with a Counter
component.
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). The route for each page is specified using the@page
directive. The template includes the following components:Counter
component (Counter.razor
): Implements the Counter page.FetchData
component (FetchData.razor
): Implements the Fetch data page.Index
component (Index.razor
): Implements the Home page.
Properties
folder: Holds development environment configuration in thelaunchSettings.json
file.Shared
folder: Contains the following shared components:MainLayout
component (MainLayout.razor
): The app's layout component.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes theNavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.
wwwroot
folder: The Web Root folder for the app containing the app's public static assets, includingappsettings.json
and environmental app settings files for configuration settings. Theindex.html
webpage is the root page of the app implemented as an HTML page:- When any page of the app is initially requested, this page is rendered and returned in the response.
- The page specifies where the root
App
component is rendered. The component is rendered at the location of theapp
DOM element (<app>Loading...</app>
).
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as@using
directives for namespaces.App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.Program.cs
: The app's entry point that sets up the WebAssembly host:- The
App
component is the root component of the app. TheApp
component is specified as theapp
DOM element (<app>Loading...</app>
inwwwroot/index.html
) to the root component collection (builder.RootComponents.Add<App>("app")
). - Services are added and configured (for example,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
).
- The
Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
- "Client": The Blazor WebAssembly app.
- "Server": An app that serves the Blazor WebAssembly app and weather data to clients.
- "Shared": A project that maintains common classes, methods, and resources.
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
- The "Server" project includes a weather forecast controller at
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project'sFetchData
component. - The "Shared" project includes a weather forecast class at
WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.
Location of the Blazor script
The Blazor script is served from an embedded resource in the ASP.NET Core shared framework.
In a Blazor Web App, the Blazor script is located in the Components/App.razor
file:
<script src="_framework/blazor.web.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Layout.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor WebAssembly app, the Blazor script content is located in the wwwroot/index.html
file:
<script src="_framework/blazor.webassembly.js"></script>
Location of <head>
and <body>
content
In a Blazor Web App, <head>
and <body>
content is located in the Components/App.razor
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Host.cshtml
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Layout.cshtml
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Host.cshtml
file.
In a Blazor WebAssembly app, <head>
and <body>
content is located in the wwwroot/index.html
file.
Dual Blazor Server/Blazor WebAssembly app
To create an app that can run as either a Blazor Server app or a Blazor WebAssembly app, one approach is to place all of the app logic and components into a Razor class library (RCL) and reference the RCL from separate Blazor Server and Blazor WebAssembly projects. For common services whose implementations differ based on the hosting model, define the service interfaces in the RCL and implement the services in the Blazor Server and Blazor WebAssembly projects.