--- 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/12/2024 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 (`.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 and 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](xref:blazor/components/layouts). * 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](xref:blazor/fundamentals/routing#navlink-component) (), which render navigation links to other Razor components. The 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 component. For client-side interactive components, the 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`](xref:mvc/views/razor#page) directive. The `App` component (`App.razor`) is 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) ([how to download](xref:blazor/fundamentals/index#sample-apps)) :::moniker-end :::moniker range="< aspnetcore-7.0" * * * [Blazor samples GitHub repository (`dotnet/blazor-samples`)](https://github.com/dotnet/blazor-samples) ([how to download](xref:blazor/fundamentals/index#sample-apps)) :::moniker-end