ASP.Net Core - Blazor Server App - File Folder Structure

Screenshot from the tutorial

Understanding the File Folder Structure of ASP.NET Core Blazor Server Apps

In the development of modern web applications, the organization of your project files is crucial for maintainability, scalability, and collaboration. This post explores the file and folder structure of an ASP.NET Core Blazor Server application, offering insights into best practices and the purpose of each component.

What is Blazor Server?

Blazor is a framework for building interactive web applications using C# instead of JavaScript. Blazor Server, specifically, allows developers to run their applications on the server using SignalR for real-time communication with the client.

Creating a New Blazor Server Project

Before diving into the folder structure, let’s create a new Blazor Server project. You can do this using the .NET CLI:

dotnet new blazorserver -o BlazorServerApp
cd BlazorServerApp

This command creates a new Blazor Server application called BlazorServerApp and navigates into that directory.

Overview of the Project Structure

Once you create a new Blazor Server project, you will see the following folder structure:

BlazorServerApp/
│
├── _Imports.razor
├── App.razor
├── BlazorServerApp.csproj
├── Program.cs
├── Startup.cs
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── lib/
└── Pages/
    ├── _Host.cshtml
    ├── Index.razor
    └── Counter.razor

Key Components of the Project Structure

Let’s break down the important files and folders:

1. _Imports.razor

This file allows you to define common namespaces that will be available across your Razor components. It is useful for reducing redundancy and improving readability.

@using System.Net.Http
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web

2. App.razor

The App.razor file is the main component of your Blazor application. It acts as the root component and is responsible for routing:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

3. BlazorServerApp.csproj

This is the project file for your Blazor Server application. It defines dependencies, framework versions, and other project settings. Here’s a simplified example:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="6.0.0" />
  </ItemGroup>
</Project>

4. Program.cs

This file contains the entry point for the Blazor application. It sets up the web host and configures services. An example setup might look like this:

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStartup<Startup>();
            });
}

5. Startup.cs

In this file, you configure services and the HTTP request pipeline for the application. Here’s a basic setup:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

6. wwwroot/

This folder contains all static files such as CSS, JavaScript, and images. For example:

• css/: Custom stylesheets can be placed here.
• js/: Any JavaScript files used in the project.
• lib/: Third-party libraries or scripts.

7. Pages/

The Pages folder contains Razor components that represent the different pages of your application. Key files include:

• _Host.cshtml: The main layout for your application.
• Index.razor: The default landing page.
• Counter.razor: An example interactive page.

Conclusion

Understanding the file and folder structure of your Blazor Server application lays the foundation for efficient development and organization. This structure not only helps in maintaining the code but also aids in collaboration with other developers. By following the best practices outlined in this tutorial, you’ll be well-equipped to build robust and scalable Blazor applications.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios