Search⌘ K
AI Features

Anatomy of a Blazor WebAssembly Application

Explore the detailed anatomy of a Blazor WebAssembly application including its multi-project solution setup. Understand the role and content of Client, Server, and Shared folders, as well as key files and components. This lesson equips you with the knowledge to navigate the project structure effectively before adding Auth0 security features.

Let’s familiarize ourselves with the structure of the Blazor WebAssembly project. It will come in handy when we integrate the application with Auth0.

The solution structure

We built our Blazor WebAssembly application as an ASP.NET Core hosted application. For this reason, the application is implemented as a multi-project solution. In the following section, we can explore our Blazor WebAssembly’s folders and files.

   �& h�( @ �((()������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ʠ��ˡ��ʞ��ɞ��л����������������������������������������������������������������������������������������������������������ˢ�ΘC�ϛG�͙A�͙B�ϴ�����������������������������������������������������������������������������������������������������������̥�ЛJ�џP�ӤX�ӤX�Ѻ�����������������������������������������������������������������������������������������������������������ͥ�ϛI�Ԧ\�ўN�НK�ж�����������������������������������������������������������������������������������������������������������Χ�ѝL�է^�ўN�МL�ж�����������������������������������������������������������������������������������������������������������Ϩ�ўN�ը`�џP�НM�з�����������������������������������������������������������������������������������������������������������ϩ�ѝM�֨`�џP�НM�ж�����������������������������������������������������������������������������������������������������������ѫ�ӡU�׫f�ӢV�ҠS�Ѹ�����������������������������������������������������������������������������������������������������������Ѭ�ҟQ�שc�ӠS�ҟP�Ѹ�����������������������������������������������������������������������������������������������������������Ү�գY�٭j�եZ�ԣX�Һ�����������������������������������������������������������������������������������������������������������Ү�բW�٬i�դY�ԢW�ҹ�����������������������������������������������������������������������������������������������������������Ӱ�֤\�ڮm�צ^�դ[�һ����������������������������������������������������������������������������������������������...#���������ӱ�֣[�ڭk�֤\�գY�Ӻ�������������������������������������������������������������������������������������������������������ճ�٧b�ܰr�٧c�ئ`�Ի�������������������������������������������������������������������������������������������������������Բ�פ^�ۮo�إ`�פ]�Ӻ�������������������������������������������������������������������������������������������������������յ�ڨe�޲w�޴y�޲w��Ĩ������������������������������������������������������������������������������������������������������Դ�٦a�ݯr�٦a�إ_�Ժ�������������������������������������������������������������������������������������������������������ն�۩g�޲w�۪i�کg�ս�������������������������������������������������������������������������������������������������������յ�ڧd�ޱu�کf�ڧd�ռ�������������������������������������������������������������������������������������������������������շ�ۨg�޲w�۪j�۩g�ս�������������������������������������������������������������������������������������������������������ַ�۩i�߲y�ܫk�۪i�ս��������������������������������������������������������������������������������������������‡���������շ�ۨi�߲y�ݬn�ܫm��¥�������������������������������������������������������������������������������������������Ç���������ָ�ܪl�ޮr�߲y��~��˵��������������������������������������������������������������������������������������������������������ַ�ܨi�ݫl�ܩi�ܩj�ս����������������������������������������������������������������������������������������ۿ�������������������շ��ָ��ַ��ָ�����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������ܿ���������������������(  @��у��̅��˅��˅��ʅ��ʅ��Ʌ�������������������������������۶�����������������������������������������������������������������������۳u�НL�Ыn�����������������������������������������������������ܵx�ҢV�Щm�����������������������������������������������������ܶ{�ӣX�Ъn�����������������������������������������������������޸�ե\�Ѭq�����������������������������������������������������຃�רa�Ӯu�����������������������������������������������������Ệ�ةd�ԯx������������������������������������������������S����⽉�ګi�հ{������������������������������������������������E����㾌�ܯq�ص�������������������������������������������������E����侎�ܭo�ײ�������������������������������������������������E����俏�ݮq�س�������������������������������������������������E����忑�ޯu�ܻ�������������������������������������������������C�����ϭ������ġ�������������������������������������������ҟ����������������������������������������������������������������������������A����������������������������������ן���������
The Blazor WebAssembly solution structure

The following sections will discuss the content of each folder and project in more detail.

The root folder

The root folder of our solution should look like the following picture:

We can see the solution file MyBlazorWasmApp.sln and three folders:

  • Client: This contains the Blazor WebAssembly project (Line 7).
  • Server: This contains the ASP.NET Core application’s project that hosts the Blazor WebAssembly application.
...