Struktur Proyek Blazor

Blazor Server versus Blazor WebAssembly

Pada tulisan sebelumnya, selintas telah disinggung struktur proyek Blazor Server dan Blazor WebAssembly.

Model Hosting ASP.NET Core Blazor

Gambar berikut memperlihatkan keduanya memiliki struktur yang tidak jauh berbeda.

File Program.cs

File ini berisi metode Main() yang merupakan titik masuk untuk kedua jenis proyek, Blazor Server dan Blazor WebAssembly. Tabel berikut memperlihatkan perbedaan di antara keduanya.

File Startup.cs

• File ini hanya ada dalam proyek Blazor Server, berisi logika startup aplikasi.
• Digunakan oleh metode CreateHostBuilder() yang ada di dalam file Program.cs.
• Kelas Startup mendefinisikan metode, antara lain: (1) ConfigureServices: mengkonfigurasi layanan DI (dependency injection) aplikasi, dan (2) Configure: mengkonfigurasi pipeline pemrosesan permintaan aplikasi.

File App.razor

• File ini merupakan komponen root aplikasi yang mengatur perutean sisi klien menggunakan komponen Router.
• Isinya sama untuk proyek Blazor Server dan Blazor WebAssembly.

<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>

• Komponen Router merender halaman yang cocok dengan alamat yang diminta.
• Router menggunakan properti Found untuk menampilkan konten ketika kecocokan ditemukan.
• Jika kecocokan tidak ditemukan, properti NotFound digunakan untuk menampilkan pesan Sorry, there's nothing at this address.

File _Imports.razor

• File berisi daftar namespace yang umum menggunakan direktif @using sehingga tidak harus memasukkannya dalam setiap komponen razor.
• Berikut adalah isi file _Imports.razor pada proyek Blazor Server.

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using BlazorServerApp
@using BlazorServerApp.Shared

• Sedangkan pada proyek Blazor WebAssembly, isi file _Imports.razor adalah sebagai berikut.

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorWebAssemblyApp
@using BlazorWebAssemblyApp.Shared

File appsettings.json (Blazor Server)

• File ini hanya ada dalam proyek Blazor Server.
• Digunakan untuk menyimpan pengaturan konfigurasi aplikasi.

Folder wwwroot

File wwwroot/index.html

• Merupakan halaman root dalam proyek Blazor WebAssembly yang diimplementasikan sebagai halaman HTML.
• Ketika permintaan pertama diajukan, halaman ini yang ditampilkan sebagai respons.
• Halaman memiliki tag HTML, HEAD dan BODY baku dan menentukan di mana komponen root aplikasi , App.razor, harus diberikan.
• Halaman memuat file _framework/blazor.webassembly.js. File inilah yang bertanggung jawab untuk:
  — mengunduh aplikasi yang dikompilasi, dependensi dan .NET runtime,
  — menginisialisasi runtime untuk menjalankan aplikasi Blazor di browser.

Folder Shared

Berisi komponen UI (user interface ‘antarmuka pengguna’) lainnya berupa file .razor yang digunakan bersama dalam aplikasi.

• MainLayout.razor: komponen tata letak utama aplikasi.
• NavMenu.razor: mengimplementasikan menu navigasi sidebar. Komponen NavLink, membuat tautan navigasi ke komponen Razor lain. Komponen NavLinkmenyorot item menu navigasi yang dipilih, membantu pengguna mengetahui komponen mana yang ditampilkan saat ini.

Folder Pages

Folder Pages berisi komponen/halaman yang dapat dirutekan dan membentuk aplikasi Blazor. Rute untuk setiap halaman ditentukan menggunakan direktif@page. Komponen memiliki ekstensi .razor.

Pada tulisan sebelumnya, telah diberikan contoh membuat aplikasi Blazor Server dan Blazor WebAssembly. Yang membedakan hanya judulnya saja. Berikut adalah tampilan homepage aplikasi Blazor WebAssembly.

Tabel berikut memperlihatkan persaman dan perbedaan isi folder Pages pada kedua jenis aplikasi.

Keduanya memiliki tiga file razor yang sama, yaitu Index.razor, Counter.razor, dan FetchData.razor, yang berturut-turut akan dijalankan bila memilih menu Home, Counter, dan Fetch data.

Dua file lainnya, _Host.cshtml dan Error.razor, hanya dimiliki oleh Blazor Server.

File Pages/_Host.cshtml

• Merupakan halaman root dalam proyek Blazor Server yang diimplementasikan sebagai halaman razor.
• Ketika permintaan pertama diajukan, halaman ini yang ditampilkan sebagai respons.
• Halaman host memiliki tag HTML, HEAD dan BODY baku dan menentukan di mana komponen root aplikasi , App.razor, harus diberikan.
• Halaman memuat file _framework/blazor.server.js. File inilah yang bertanggung jawab mengatur koneksi SignalR real-time antara browser dan server. Koneksi ini digunakan untuk bertukar informasi antara klien dan server.

File Pages/Error.razor

File dijalankan ketika ada kasus yang tidak tertangani terjadi di aplikasi.

Folder Data

• Folder ini hanya ada dalam aplikasi Blazor Server.
• Berisi kelas dan implementasi terkait dengan data.
• Dalam contoh kasus kedua aplikasi, folder data berisi kelas WeatherForecast dan implementasi WeatherForecastServiceyang menyediakan contoh data cuaca ke FetchDatakomponen aplikasi.

Struktur proyek Blazor Server dan Blazor WebAssembly tidak berbeda jauh. Satu-satunya perbedaan adalah cara aplikasi di-host. Jika diimplementasikan dengan benar, mudah untuk mengonversi aplikasi server Blazor ke aplikasi Blazor WebAssembly dan sebaliknya.

Referensi

Project structure for Blazor apps

ASP.NET Core Blazor templates

Handle errors in ASP.NET Core Blazor apps

Exploring Blazor