Edit

Share via

ASP.NET Core Blazor project structure

  • Article

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.

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 includes NavLink 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:

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 a Counter component.
    • Bootstrap frontend toolkit.
  • If the blazorserver-empty template is used, the app is created without demonstration code and Bootstrap.

Project structure:

  • Data folder: Contains the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData 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 the launchSettings.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 the NavLink 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 example FetchData 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.

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 the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData 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 the launchSettings.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 the NavLink 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 example FetchData 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.

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 the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData 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 the launchSettings.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 the NavLink 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. The Startup class defines two methods:

    • ConfigureServices: Configures 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 example FetchData 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 the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData 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 the launchSettings.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 the NavLink 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. The Startup class defines two methods:

    • ConfigureServices: Configures 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 example FetchData 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 a Counter component.
    • Bootstrap frontend toolkit.
  • 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 the NavLink 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 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.

  • wwwroot folder: The Web Root folder for the app containing the app's public static assets, including appsettings.json and environmental app settings files for configuration settings and sample weather data (sample-data/weather.json). The index.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 the div DOM element with an id of app (<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. The App component is specified as the div DOM element with an id of app (<div id="app">Loading...</div> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("#app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

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 a Counter component.
    • Bootstrap frontend toolkit.
  • 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 the launchSettings.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 the NavLink 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, including appsettings.json and environmental app settings files for configuration settings. The index.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 the div DOM element with an id of app (<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. The App component is specified as the div DOM element with an id of app (<div id="app">Loading...</div> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("#app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

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's FetchData 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 the launchSettings.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 the NavLink 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, including appsettings.json and environmental app settings files for configuration settings. The index.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 the div DOM element with an id of app (<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. The App component is specified as the div DOM element with an id of app (<div id="app">Loading...</div> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("#app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

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's FetchData 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 the launchSettings.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 the NavLink 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, including appsettings.json and environmental app settings files for configuration settings. The index.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 the div DOM element with an id of app (<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. The App component is specified as the div DOM element with an id of app (<div id="app">Loading...</div> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("#app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

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's FetchData 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 the launchSettings.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 the NavLink 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, including appsettings.json and environmental app settings files for configuration settings. The index.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 the app 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. The App component is specified as the app DOM element (<app>Loading...</app> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

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's FetchData 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.

Additional resources