Bagikan melalui


Beberapa aplikasi yang dihosting di ASP.NET Core Blazor WebAssembly

Nota

Ini bukan versi terbaru dari artikel ini. Untuk versi terbaru artikel ini, lihat versi .NET 7.

Artikel ini menjelaskan cara mengonfigurasi aplikasi host untuk menghosting beberapa aplikasi Blazor WebAssemblyBlazor WebAssembly.

Konfigurasi

Pilih versi artikel ini yang cocok dengan persyaratan hosting Anda, baik hosting port/domain (misalnya, :5001/:5002 atau firstapp.com/secondapp.com) atau hosting subpath rute (misalnya, /FirstApp dan /SecondApp).

Dengan pilihan hosting saat ini, artikel ini mencakup hosting port/domain (misalnya, :5001/:5002 atau ).firstapp.com/secondapp.com

Dalam contoh berikut:

  • Nama proyek aplikasi Blazor WebAssembly yang dihosting ada MultipleBlazorApps di folder bernama MultipleBlazorApps.
  • Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada MultipleBlazorApps.Client di Client folder , MultipleBlazorApps.Server di Server folder , dan MultipleBlazorApps.Shared di Shared folder .
  • Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
  • Aplikasi klien kedua ditambahkan ke solusi, MultipleBlazorApps.SecondClient di folder bernama SecondClient.
  • Secara opsional, proyek server (MultipleBlazorApps.Server) dapat melayani halaman atau tampilan sebagai Razor halaman atau aplikasi MVC.
  • Aplikasi klien pertama dapat diakses di browser di port 5001 atau dengan host di firstapp.com. Aplikasi klien kedua dapat diakses di browser di port 5002 atau dengan sejumlah secondapp.com.

Dengan pilihan saat ini, artikel ini membahas penyediaan subjalur rute (misalnya, /FirstApp dan /SecondApp).

Dalam contoh berikut:

  • Nama proyek aplikasi Blazor WebAssembly yang dihosting ada MultipleBlazorApps di folder bernama MultipleBlazorApps.
  • Tiga proyek dalam solusi sebelum aplikasi klien kedua ditambahkan ada MultipleBlazorApps.Client di Client folder , MultipleBlazorApps.Server di Server folder , dan MultipleBlazorApps.Shared di Shared folder .
  • Aplikasi klien awal (pertama) adalah proyek klien default dari solusi yang dibuat dari Blazor WebAssembly templat proyek.
  • Aplikasi klien kedua ditambahkan ke solusi, MultipleBlazorApps.SecondClient di folder bernama SecondClient.
  • Secara opsional, proyek server (MultipleBlazorApps.Server) dapat melayani halaman atau tampilan sebagai Halaman formal Razor atau aplikasi MVC.
  • Kedua aplikasi klien menggunakan port default yang ditentukan oleh MultipleBlazorApps.Server file proyek Properties/launchSettings.json dalam nilainya applicationUrl . Aplikasi klien pertama dapat diakses di browser di /FirstApp subpath. Aplikasi klien kedua dapat diakses di browser di /SecondApp subpath.

Contoh yang ditunjukkan dalam artikel ini memerlukan konfigurasi tambahan untuk:

  • Mengakses aplikasi langsung di contoh domain host, firstapp.com dan secondapp.com.
  • Sertifikat untuk aplikasi klien untuk mengaktifkan keamanan TLS/HTTPS.
  • Mengonfigurasi aplikasi server sebagai Razor aplikasi Pages untuk fitur berikut:
    • Integrasi komponen Razor ke dalam halaman atau tampilan.
    • Prarender Razor komponen.

Konfigurasi sebelumnya berada di luar cakupan artikel ini. Untuk informasi selengkapnya, lihat sumber daya berikut ini:

Gunakan Blazor WebAssembly yang dihosting yang ada atau buat solusi baru yang dihosting Blazor WebAssembly dari templat proyek Blazor WebAssembly dengan meneruskan opsi -ho|--hosted jika menggunakan .NET CLI, atau pilih kotak centang ASP.NET Core Hosted di Visual Studio saat proyek dibuat di IDE.

Gunakan folder untuk solusi bernama MultipleBlazorApps dan beri nama proyek MultipleBlazorApps.

Buat folder baru dalam solusi bernama SecondClient. Di folder baru, tambahkan aplikasi klien kedua Blazor WebAssembly bernama MultipleBlazorApps.SecondClient. Tambahkan proyek sebagai aplikasi mandiri Blazor WebAssembly . Untuk membuat aplikasi mandiri Blazor WebAssembly, jangan berikan opsi -ho|--hosted jika menggunakan .NET CLI, atau jangan gunakan kotak centang ASP.NET Core Hosted jika menggunakan Visual Studio.

Buat perubahan berikut pada MultipleBlazorApps.SecondClient proyek:

  • FetchData Salin komponen (Pages/FetchData.razor) dari Client/Pages folder ke SecondClient/Pages folder . Langkah ini diperlukan karena aplikasi mandiri Blazor WebAssembly tidak memanggil Server pengontrol proyek untuk data cuaca, aplikasi ini menggunakan file data statis. Dengan menyalin FetchData komponen ke proyek yang ditambahkan, aplikasi klien kedua juga melakukan panggilan API web ke API server untuk data cuaca.
  • SecondClient/wwwroot/sample-data Hapus folder, karena weather.json file di folder tidak digunakan.

Tabel berikut ini menjelaskan folder solusi dan nama proyek setelah SecondClient folder dan MultipleBlazorApps.SecondClient proyek ditambahkan.

Folder fisik Nama proyek Deskripsi
Client MultipleBlazorApps.Client Blazor WebAssembly aplikasi klien
SecondClient MultipleBlazorApps.SecondClient Blazor WebAssembly aplikasi klien
Server MultipleBlazorApps.Server aplikasi server ASP.NET Core
Shared MultipleBlazorApps.Shared Proyek sumber daya bersama

Proyek ini MultipleBlazorApps.Server melayani dua Blazor WebAssembly aplikasi klien dan menyediakan data cuaca ke komponen aplikasi FetchData klien melalui pengontrol MVC. Secara opsional, proyek MultipleBlazorApps.Server juga dapat menyajikan halaman atau tampilan, seperti aplikasi halaman Razor atau MVC tradisional. Langkah-langkah untuk mengaktifkan halaman atau tampilan penyajian dibahas nanti dalam artikel ini.

Nota

Demonstrasi dalam artikel ini menggunakan nama jalur aset web statis FirstApp dari proyek MultipleBlazorApps.Client dan SecondApp dari proyek MultipleBlazorApps.SecondClient. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client1/Client21/2 , atau skema penamaan serupa.

Saat merutekan permintaan ke aplikasi klien oleh port atau domain, "FirstApp" dan "SecondApp" digunakan secara internal untuk merutekan permintaan dan melayani respons untuk aset statis dan tidak terlihat di bilah alamat browser.

Nota

Demonstrasi dalam artikel ini menggunakan nama jalur aset web statis FirstApp dari proyek MultipleBlazorApps.Client dan SecondApp dari proyek MultipleBlazorApps.SecondClient. Nama "FirstApp" dan "SecondApp" hanya untuk tujuan demonstrasi. Nama lain dapat diterima untuk membedakan aplikasi klien, seperti App1/App2, ,Client1/Client21/2 , atau skema penamaan serupa.

"FirstApp" dan "SecondApp" juga muncul di bilah alamat browser karena permintaan dirutekan ke dua aplikasi klien menggunakan nama ini. Segmen rute URL lain yang valid didukung, dan segmen rute tidak perlu cocok dengan nama yang digunakan untuk merutekan aset web statis secara internal. Menggunakan "FirstApp" dan "SecondApp" untuk perutean aset statis internal dan perutean permintaan aplikasi hanya untuk kemudahan dalam contoh artikel ini.

Dalam file proyek aplikasi klien pertama (MultipleBlazorApps.Client.csproj), tambahkan <StaticWebAssetBasePath> properti ke <PropertyGroup> dengan nilai FirstApp untuk mengatur jalur dasar untuk aset statis proyek:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient Dalam file proyek aplikasi (MultipleBlazorApps.SecondClient.csproj):

  • <StaticWebAssetBasePath> Tambahkan properti ke <PropertyGroup> dengan nilai SecondApp:

    <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
    
  • Tambahkan referensi untuk proyek MultipleBlazorApps.Shared ke dalam <ItemGroup>.

    <ItemGroup>
      <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
    </ItemGroup>
    

Dalam file proyek aplikasi server (Server/MultipleBlazorApps.Server.csproj), buat referensi proyek untuk aplikasi klien MultipleBlazorApps.SecondClient yang ditambahkan dalam <ItemGroup>:

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

Dalam file aplikasi Properties/launchSettings.json server, konfigurasikan profil applicationUrlKestrel (MultipleBlazorApps.Server) untuk mengakses aplikasi klien pada port 5001 dan 5002. Jika Anda mengonfigurasi lingkungan lokal untuk menggunakan domain contoh, URL untuk applicationUrl dapat menggunakan firstapp.com dan secondapp.com dan tidak menggunakan port.

Nota

Penggunaan port dalam demonstrasi ini memungkinkan akses ke proyek klien di browser lokal tanpa perlu mengonfigurasi lingkungan hosting lokal sehingga browser web dapat mengakses aplikasi klien melalui konfigurasi host, firstapp.com dan secondapp.com. Dalam skenario produksi, konfigurasi umumnya adalah menggunakan subdomain untuk membedakan aplikasi klien.

Contohnya:

  • Port dihilangkan dari konfigurasi demonstrasi ini.
  • Host diubah untuk menggunakan subdomain, seperti www.contoso.com untuk pengunjung situs dan admin.contoso.com untuk administrator.
  • Host tambahan dapat ditambahkan untuk aplikasi klien tambahan, dan setidaknya satu host lagi diperlukan jika aplikasi server juga merupakan aplikasi Razor Pages atau MVC yang menyajikan halaman atau tampilan.

Jika Anda berencana untuk menyajikan halaman atau tampilan dari aplikasi server, gunakan pengaturan berikut applicationUrl dalam Properties/launchSettings.json file, yang mengizinkan akses berikut:

  • Secara opsional, Razor aplikasi Pages atau MVC (MultipleBlazorApps.Server proyek) merespons permintaan di port 5000.
  • Respon permintaan klien pertama (MultipleBlazorApps.Client proyek) berada di port 5001.
  • Respon terhadap permintaan untuk klien kedua (MultipleBlazorApps.SecondClient proyek) tersedia di port 5002.
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

Jika Anda tidak merencanakan aplikasi server untuk melayani halaman atau tampilan dan hanya melayani Blazor WebAssembly aplikasi klien, gunakan pengaturan berikut, yang mengizinkan akses berikut:

  • Aplikasi klien pertama merespons pada port 5001.
  • Aplikasi klien kedua merespons pada port 5002.
"applicationUrl": "https://localhost:5001;https://localhost:5002",

Dalam file aplikasi Program.cs server, hapus kode berikut, yang muncul setelah panggilan ke UseHttpsRedirection:

  • Jika Anda berencana untuk menyajikan halaman atau tampilan dari aplikasi server, hapus baris kode berikut:

    - app.UseBlazorFrameworkFiles();
    
    - app.MapFallbackToFile("index.html");
    
  • Jika Anda merencanakan aplikasi server untuk hanya melayani Blazor WebAssembly aplikasi klien, hapus kode berikut:

    - app.UseBlazorFrameworkFiles();
    
    ...
    
    - app.UseRouting();
    
    - app.MapRazorPages();
    - app.MapControllers();
    - app.MapFallbackToFile("index.html");
    

    Biarkan Middleware File Statis di tempat:

    app.UseStaticFiles();
    
  • Tambahkan middleware yang memetakan permintaan ke aplikasi klien. Contoh berikut mengonfigurasi middleware untuk dijalankan saat port permintaan adalah 5001 untuk aplikasi klien pertama atau 5002 untuk aplikasi klien kedua, atau host permintaan adalah firstapp.com untuk aplikasi klien pertama atau secondapp.com untuk aplikasi klien kedua.

    Nota

    Penggunaan host (firstapp.com/secondapp.com) pada sistem lokal dengan browser lokal memerlukan konfigurasi tambahan yang berada di luar cakupan artikel ini. Untuk pengujian lokal skenario ini, sebaiknya gunakan port. Aplikasi produksi umum dikonfigurasi untuk menggunakan subdomain, seperti www.contoso.com untuk pengunjung situs dan admin.contoso.com untuk administrator. Dengan konfigurasi DNS dan server yang tepat, yang berada di luar cakupan artikel ini dan tergantung pada teknologi yang digunakan, aplikasi merespons permintaan di host apa pun yang dinamai dalam kode berikut.

    Tempat Anda menghapus app.UseBlazorFrameworkFiles(); baris dari Program.cs, tempatkan kode berikut:

    app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
        ctx.Request.Host.Equals("firstapp.com"), first =>
    {
        first.Use((ctx, nxt) =>
        {
            ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
            return nxt();
        });
    
        first.UseBlazorFrameworkFiles("/FirstApp");
        first.UseStaticFiles();
        first.UseStaticFiles("/FirstApp");
        first.UseRouting();
    
        first.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
                "FirstApp/index.html");
        });
    });
    
    app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
        ctx.Request.Host.Equals("secondapp.com"), second =>
    {
        second.Use((ctx, nxt) =>
        {
            ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
            return nxt();
        });
    
        second.UseBlazorFrameworkFiles("/SecondApp");
        second.UseStaticFiles();
        second.UseStaticFiles("/SecondApp");
        second.UseRouting();
    
        second.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
                "SecondApp/index.html");
        });
    });
    

    Peringatan

    API yang menggunakan header Host, seperti dan HttpRequest.Host, berisiko spoofing oleh klien.

    Untuk mencegah spoofing host dan port, gunakan salah satu pendekatan berikut:

  • Tambahkan middleware yang memetakan permintaan ke aplikasi klien. Contoh berikut mengonfigurasi middleware untuk dijalankan saat subpath permintaan adalah /FirstApp untuk aplikasi klien pertama atau /SecondApp untuk aplikasi klien kedua.

    Tempat Anda menghapus app.UseBlazorFrameworkFiles(); baris dari Program.cs, tempatkan kode berikut:

    app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
        StringComparison.OrdinalIgnoreCase), first =>
    {
        first.UseBlazorFrameworkFiles("/FirstApp");
        first.UseStaticFiles();
        first.UseStaticFiles("/FirstApp");
        first.UseRouting();
    
        first.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
                "FirstApp/index.html");
        });
    });
    
    app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
        StringComparison.OrdinalIgnoreCase), second =>
    {
        second.UseBlazorFrameworkFiles("/SecondApp");
        second.UseStaticFiles();
        second.UseStaticFiles("/SecondApp");
        second.UseRouting();
    
        second.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
                "SecondApp/index.html");
        });
    });
    
  • Atur jalur dasar di setiap aplikasi klien:

    Dalam file aplikasi klien pertama index.html (Client/wwwroot/index.html), perbarui nilai tag <base> untuk mencerminkan jalur sub. Garis miring berikutnya diperlukan:

    <base href="/FirstApp/" />
    

    Di file aplikasi klien kedua index.html (SecondClient/wwwroot/index.html), perbarui tag nilai <base> untuk merefleksikan subpath. Garis miring berikutnya diperlukan:

    <base href="/SecondApp/" />
    

Untuk informasi selengkapnya tentang UseStaticFiles, lihat file statis ASP.NET CoreBlazor.

Untuk informasi selengkapnya tentang UseBlazorFrameworkFiles dan MapFallbackToFile, lihat sumber daya berikut ini:

Nota

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Ganti cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Permintaan dari aplikasi klien ke /WeatherForecast di API server adalah ke /FirstApp/WeatherForecast atau /SecondApp/WeatherForecast tergantung pada aplikasi klien mana yang membuat permintaan. Oleh karena itu, rute pengontrol yang mengembalikan data cuaca dari API server memerlukan modifikasi untuk menyertakan segmen jalur.

Di pengontrol prakiraan cuaca aplikasi server (Controllers/WeatherForecastController.cs), ganti rute yang ada ([Route("[controller]")]) ke WeatherForecastController dengan rute berikut, yang memperhitungkan jalur permintaan klien:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Jika Anda berencana untuk menyajikan halaman dari aplikasi server, tambahkan IndexRazor halaman ke Pages folder aplikasi server:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Nota

Halaman sebelumnya Index adalah contoh minimal murni untuk tujuan demonstrasi. Jika aplikasi memerlukan aset tambahan Razor Pages, seperti tata letak, gaya, skrip, dan impor, dapat diperoleh dari aplikasi yang dibuat dari Razor templat proyek Pages. Untuk informasi selengkapnya, lihat Razor Arsitektur dan konsep Halaman di ASP.NET Core.

Jika Anda berencana untuk menyajikan tampilan MVC dari aplikasi server, tambahkan Index tampilan dan Home pengontrol:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Nota

Tampilan sebelumnya Index adalah contoh minimal murni untuk tujuan demonstrasi. Jika aplikasi memerlukan aset MVC tambahan, seperti tata letak, gaya, skrip, dan impor, dapatkan dari aplikasi yang dibuat dari templat proyek MVC. Untuk informasi selengkapnya, lihat Mulai menggunakan ASP.NET Core MVC.

Untuk informasi selengkapnya tentang menggunakan Razor komponen dari salah satu aplikasi klien di halaman atau tampilan aplikasi server, lihat Mengintegrasikan komponen ASP.NET Core Razor dengan MVC atau Razor Pages dalam solusi yang dihostingBlazor WebAssembly.

Menjalankan aplikasi

Jalankan MultipleBlazorApps.Server proyek:

  • Akses aplikasi klien awal di https://localhost:5001.
  • Akses aplikasi klien yang ditambahkan di https://localhost:5002.
  • Jika aplikasi server dikonfigurasi untuk melayani halaman atau tampilan, akses Index halaman atau tampilan di https://localhost:5000.
  • Akses aplikasi klien awal di https://localhost:{DEFAULT PORT}/FirstApp.
  • Akses aplikasi klien yang ditambahkan di https://localhost:{DEFAULT PORT}/SecondApp.
  • Jika aplikasi server dikonfigurasi untuk melayani halaman atau tampilan, akses Index halaman atau tampilan di https://localhost:{DEFAULT PORT}.

Dalam contoh URL sebelumnya, {DEFAULT PORT} placeholder adalah port default yang ditentukan oleh proyek file MultipleBlazorApps.Server dalam nilainya Properties/launchSettings.jsonapplicationUrl.

Penting

Saat menjalankan aplikasi dengan perintah dotnet watch (atau dotnet run) (.NET CLI), pastikan bahwa prompt perintah terbuka di folder Server solusi.

Saat menggunakan tombol mulai Visual Studio untuk menjalankan aplikasi, pastikan bahwa proyek MultipleBlazorApps.Server ditetapkan sebagai proyek awal yang disorot dalam Penjelajah Solusi.

Aset statis

Saat aset berada di folder aplikasi wwwroot klien, berikan jalur permintaan aset statis dalam komponen:

<img alt="..." src="{PATH AND FILE NAME}" />

Placeholder {PATH AND FILE NAME} adalah jalur dan nama file di bawah wwwroot.

Misalnya, sumber untuk gambar Jeep (jeep-yj.png) di vehicle folder wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Dukungan pustaka kelas Razor (RCL)

Razor Tambahkan pustaka kelas (RCL) ke solusi sebagai proyek baru:

  • Klik kanan solusi di Penjelajah Solusi dan pilih Tambahkan>Proyek Baru.
  • Gunakan templat proyek Pustaka Kelas untuk membuat proyek.Razor Contoh di bagian ini menggunakan nama ComponentLibrary, yang juga merupakan nama rakitan RCL. Jangan pilih kotak centang Halaman dukungan dan tampilan .

Untuk setiap aplikasi klien yang dihosting Blazor WebAssembly , buat referensi proyek untuk proyek RCL dengan mengklik kanan setiap proyek klien di Penjelajah Solusi dan memilih Tambahkan>Referensi Proyek.

Gunakan komponen dari RCL di aplikasi klien dengan salah satu pendekatan berikut:

  • Tempatkan @using direktif di bagian atas komponen untuk namespace RCL dan tambahkan Razor sintaks untuk komponen. Contoh berikut adalah untuk RCL dengan nama rakitan ComponentLibrary:

    @using ComponentLibrary
    
    ...
    
    <Component1 />
    
  • Berikan namespace RCL bersama dengan sintaksis Razor untuk komponen. Pendekatan ini tidak memerlukan @using arahan di bagian atas file komponen. Contoh berikut adalah untuk RCL dengan nama rakitan ComponentLibrary:

    <ComponentLibrary.Component1 />
    

Nota

Arahan @using juga dapat ditempatkan ke dalam file setiap aplikasi _Import.razor klien, yang membuat namespace RCL tersedia secara global untuk komponen dalam proyek tersebut.

Jika ada aset statis lain di folder wwwroot dalam RCL, referensikan aset statis di aplikasi klien mengikuti panduan dalam Razor:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

Tempat {PACKAGE ID} penampung adalah ID paket RCL. ID paket secara default akan diatur ke nama rakitan proyek jika <PackageId> tidak ditentukan dalam file proyek. Placeholder {PATH AND FILE NAME} adalah jalur dan nama file dalam wwwroot.

Contoh berikut menunjukkan markup untuk gambar Jeep (jeep-yj.png) di dalam folder vehicle dari folder RCL wwwroot. Contoh berikut adalah untuk RCL dengan nama rakitan ComponentLibrary:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Sumber daya tambahan