In this blog post, we will take a look into the Blazor WebAssembly App Project Structure and try to understand the folder layout and what the different files represent and what they do. If you are new to ASP.NET Core Blazor application, then I would highly recommend you to go through the introductory post on Blazor Applications.
Quick Introduction to Blazor Application
The developer can build a Blazor application that can be deployed on the server termed Blazor Server App or can be deployed directly inside the client browsers as a WebAssembly termed as Blazor WebAssembly App. Here, we are going to explore the project structure of the Blazor WebAssembly App.
How to create Blazor WebAssembly App in Visual Studio 2019
The Blazor Application is created using Visual Studio 2019, .NET Core v3.1, and WebAssembly.Templates::3.2.0. At the time of writing Blazor WebAssembly is currently in preview.
- Visual Studio 2019, free community edition can be downloaded here
- .NET Core 3.1 SDK, download here.
- Download Blazor WebAssembly template using the following dotnet-cli code:
# run the following command in the command line dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
Steps to create and display the Blazor WebAssembly application
- Open Visual Studio 2019.
- Select “Create a New Project” from the “Get Started” list on the “Startup Page“
- Select “Blazor App” from the template list and click the “Next” button.
- Give a “Project name“, here I have given “BlazorWebAssemblyApp” as the name and click “Create“. (Let the other options be of default values)
- Now select “Blazor WebAssembly App” from the list of available templates and click “Create” leaving all the other options as it is.
- Select or open the Solution Explorer (Ctrl+Alt+L) to view the Blazor application project structure.
Quick video on how to create the Blazor WebAssembly App in Visual Studio 2019
Blazor WebAssembly App Project Structure – Description
The details of the project structure can be seen in the solution explorer, the explorer displays all the projects related to a single solution. Lets us understand every single item in the project tree list.
This node contains the detail about all the service references added to the project. A new service can be referred here, for example, if you want to add access to Cloud Storage of Azure Storage you can add the service here.
The Dependencies node contains all the references of the NuGet packages used in the project. Here the Frameworks node contains a reference to the NETStandard.Library. The Packages node contains references to the WebAssembly packages the System.Net.Http.Json.
This properties node contains a launchSettings.json file containing configuration details about what action to perform when the application is executed and contain details like IIS Express settings, application URLs, authentication, SSL port details, etc
This folder contains the routable Razor components or pages (views) containing the description of the view and logic to handle user interactions.
This folder contains Razor components or views that are common across the project.
This file contains all the using statements or the Razor directives to include in the components of the application.
This is the root component of the application, the routing mechanism of the application can be found in this file. The component receives user requests and renders the matching page on the client’s browser.
This class is the entry point of the web application. It builts the host and configures it. The root component of the application is specified in this class as well as all the service can be registered here.
I hope the article helped you in understanding ASP.NET Core 3.0 Blazor WebAssembly App Project Structure, thanks for visiting. Cheers!!!