--- 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: 01/19/2021 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR] uid: blazor/project-structure --- # ASP.NET Core Blazor project structure This article describes the files and folders that make up a Blazor app generated from one of the Blazor framework's project templates. For information on how to use tooling to create a Blazor app from a Blazor project template, see . For information on Blazor's hosting models, Blazor WebAssembly and Blazor Server, see . ## 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 routable components/pages (`.razor`) that make up the Blazor app. The route for each page is specified using the [`@page`](xref:mvc/views/razor#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/launchSettings.json`: Holds [development environment configuration](xref:fundamentals/environments#development-and-launchsettingsjson). ::: moniker range=">= aspnetcore-5.0" * `Shared` folder: Contains the following shared components and stylesheets: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/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 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. ::: moniker-end ::: moniker range="< aspnetcore-5.0" * `Shared` folder: Contains the following shared components: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). * `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 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. ::: moniker-end ::: moniker range=">= aspnetcore-5.0" * `wwwroot`: The [Web Root](xref:fundamentals/index#web-root) folder for the app containing the app's public static assets, including `appsettings.json` and environmental app settings files for [configuration settings](xref:blazor/fundamentals/configuration). 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` (`
Loading...
`). ::: moniker-end ::: moniker range="< aspnetcore-5.0" * `wwwroot`: The [Web Root](xref:fundamentals/index#web-root) folder for the app containing the app's public static assets, including `appsettings.json` and environmental app settings files for [configuration settings](xref:blazor/fundamentals/configuration). 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 (`Loading...`). ::: moniker-end > [!NOTE] > JavaScript (JS) files added to the `wwwroot/index.html` file should appear before the closing `` tag. The order that custom JS code is loaded from JS files is important in some scenarios. For example, ensure that JS files with interop methods are included before Blazor framework JS files. * `_Imports.razor`: Includes common Razor directives to include in the app's components (`.razor`), such as [`@using`](xref:mvc/views/razor#using) directives for namespaces. * `App.razor`: The root component of the app that sets up client-side routing using the component. The component intercepts browser navigation and renders the page that matches the requested address. ::: moniker range=">= aspnetcore-5.0" * `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` (`
Loading...
` in `wwwroot/index.html`) to the root component collection (`builder.RootComponents.Add("#app")`). * [Services](xref:blazor/fundamentals/dependency-injection) are added and configured (for example, `builder.Services.AddSingleton()`). ::: moniker-end ::: moniker range="< aspnetcore-5.0" * `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 (`Loading...` in `wwwroot/index.html`) to the root component collection (`builder.RootComponents.Add("app")`). * [Services](xref:blazor/fundamentals/dependency-injection) are added and configured (for example, `builder.Services.AddSingleton()`). ::: moniker-end ## Blazor Server 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 routable components/pages (`.razor`) that make up the Blazor app and the root Razor page of a Blazor Server app. The route for each page is specified using the [`@page`](xref:mvc/views/razor#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. > [!NOTE] > JavaScript (JS) files added to the `Pages/_Host.cshtml` file should appear before the closing `` tag. The order that custom JS code is loaded from JS files is important in some scenarios. For example, ensure that JS files with interop methods are included before Blazor framework JS files. * `Properties/launchSettings.json`: Holds [development environment configuration](xref:fundamentals/environments#development-and-launchsettingsjson). ::: moniker range=">= aspnetcore-5.0" * `Shared` folder: Contains the following shared components and stylesheets: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/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 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. ::: moniker-end ::: moniker range="< aspnetcore-5.0" * `Shared` folder: Contains the following shared components: * `MainLayout` component (`MainLayout.razor`): The app's [layout component](xref:blazor/layouts). * `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 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. ::: moniker-end * `wwwroot`: The [Web Root](xref:fundamentals/index#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`](xref:mvc/views/razor#using) directives for namespaces. * `App.razor`: The root component of the app that sets up client-side routing using the component. The component intercepts browser navigation and renders the page that matches the requested address. * `appsettings.json` and environmental app settings files: Provide [configuration settings](xref:blazor/fundamentals/configuration) for the app. * `Program.cs`: The app's entry point that sets up the ASP.NET Core [host](xref:fundamentals/host/generic-host). * `Startup.cs`: Contains the app's startup logic. The `Startup` class defines two methods: * `ConfigureServices`: Configures the app's [dependency injection (DI)](xref:fundamentals/dependency-injection) services. Services are added by calling , and the `WeatherForecastService` is added to the service container for use by the example `FetchData` component. * `Configure`: Configures the app's request handling pipeline: * is called to set up an endpoint for the real-time connection with the browser. The connection is created with [SignalR](xref:signalr/introduction), which is a framework for adding real-time web functionality to apps. * [`MapFallbackToPage("/_Host")`](xref:Microsoft.AspNetCore.Builder.RazorPagesEndpointRouteBuilderExtensions.MapFallbackToPage*) is called to set up the root page of the app (`Pages/_Host.cshtml`) and enable navigation. ## Additional resources * *