--- title: ASP.NET Core Blazor project structure author: guardrex description: Learn about ASP.NET Core Blazor app project structure. monikerRange: '>= aspnetcore-3.1' ms.author: riande ms.custom: mvc ms.date: 11/14/2023 uid: blazor/project-structure --- # ASP.NET Core Blazor project structure [!INCLUDE[](~/includes/not-latest-version.md)] This article describes the files and folders that make up a Blazor app generated from a Blazor project template. :::moniker range=">= aspnetcore-8.0" ## Blazor Web App Blazor Web App project template: `blazor` The Blazor Web App project template provides a single starting point for using Razor components 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 download 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. Any components using the Interactive WebAssembly or Interactive Auto render modes must be built from the client project. For more information, see . * Server project: * `Components` folder: * `Layout` folder: Contains the following layout components and stylesheets: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/components/layouts). * `MainLayout.razor.css`: Stylesheet for the app's main layout. * `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-and-navmenu-components) (), which renders navigation links to other Razor components. The component indicates to the user which component is currently displayed. * `NavMenu.razor.css`: Stylesheet for the app's navigation menu. * `Pages` folder: Contains the app's routable server-side Razor components (`.razor`). The route for each page is specified using the [`@page`](xref:mvc/views/razor#page) directive. The template includes the following: * `Counter` component (`Counter.razor`): Implements the *Counter* page. * `Error` component (`Error.razor`): Implements the *Error* page. * `Home` component (`Home.razor`): Implements the *Home* page. * `Weather` component (`Weather.razor`): Implements the *Weather forecast* page. * `App` component (`App.razor`): The root component of the app with HTML `` markup, the `Routes` component, and the Blazor ` ``` In a Blazor Server app, the Blazor script is located in the `Pages/_Host.cshtml` file: ```html ``` :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" In a Blazor Server app, the Blazor script is located in the `Pages/_Host.cshtml` file: ```html ``` :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" In a Blazor Server app, the Blazor script is located in the `Pages/_Layout.cshtml` file: ```html ``` :::moniker-end :::moniker range="< aspnetcore-6.0" In a Blazor Server app, the Blazor script is located in the `Pages/_Host.cshtml` file: ```html ``` :::moniker-end In a Blazor WebAssembly app, the Blazor script content is located in the `wwwroot/index.html` file: ```html ``` ## Location of `` and `` content :::moniker range=">= aspnetcore-8.0" In a Blazor Web App, `` and `` content is located in the `Components/App.razor` file. :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" In a Blazor Server app, `` and `` content is located in the `Pages/_Host.cshtml` file. :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" In a Blazor Server app, `` and `` content is located in the `Pages/_Layout.cshtml` file. :::moniker-end :::moniker range="< aspnetcore-6.0" In a Blazor Server app, `` and `` content is located in the `Pages/_Host.cshtml` file. :::moniker-end In a Blazor WebAssembly app, `` and `` content is located in the `wwwroot/index.html` file. :::moniker range="< aspnetcore-8.0" ## 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)](xref:blazor/components/class-libraries) 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. :::moniker-end ## Additional resources :::moniker range=">= aspnetcore-7.0" * * * * [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) :::moniker-end :::moniker range="< aspnetcore-7.0" * * * [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) :::moniker-end