DEV Community

Sabah Shariq
Sabah Shariq

Posted on

Blazor Project Structure and Layout

In this blog post we will discuss about different files and folder type in Blazor Server and Blazor WebAssembly app. We will not dive into deep details but a simple explanation so one get started in Blazor web development.

Project Structure

As you can see from the above image both Blazor Server and WebAssembly project some has common file and folder structure. Now we will look into details regarding this.


This file contains the Main() method which is the entry point for both of the project.


This file is only present in Blazor Server project. From the file name you can guess that it only contains the application's startup logic.


This file contains the routing mechanism which uses the built-in routing component and sets up the client side routing. Router uses following two property to display content:

  • Found: When a match is found this property display the content.
  • Not Found: If a match is not found it display the message - Sorry, there's nothing at this address.

App Razor

Pages folder:

This folder contains the all the web page that you see in the Blazor web application. This web pages are knows as Razor component and have .razor extension at end of each file name.

Shared folder

This contains the that will be used across the project like layout, menu etc. By default you will see this folder contains MainLayout.razor, NavMenu.razor, SurveyPrompt.razor where the content in these file are utilizes in the razor components or razor files that is Pages folder.


This folder contains the static files like images, stylesheets, javascript etc.


This only contains in blazor server project and contains configuration settings. In this file, we mostly store global values so that we can read those in the entire application.

Remember everything in a Blazor application is a razor component. Components are the fundamental building blocks of a Blazor application.

Top comments (0)