عنوان:

‫اجرای کامل یک پروژه blazor در یک مسیر مشخص در پروژه وب


نویسنده: ایمان محمدی
تاریخ: ۱۴۰۳/۱۲/۰۱ ۱۴:۲۴
آدرس: www.dntips.ir
فرض کنید یک پکیج نوگت داریم و می خواهیم با نصب پکیج UI مرتبط به داشبرد اون پکیج دسترسی داشته باشیم.
مثال نیازمندی هم پکیج hangfire که اگر آدرس /hangfire رو بزنیم می تونیم داشبردش رو مشاهده کنیم.
دارم با آزمون و خطا سعی می کنم این موضوع رو انجام بدم و تا حالا به دو تا روش رسیدم.
1) یک روش اینه که پروژه از نوع وب اسمبلی رو پابلیش بگیرم و داخل پوشه wwwroot بگذاریم و خروجی پابلیش رو در یک مسیر مشخص اجرا کنیم:

// wwwroot/app1/index.html and other files
app.Map("/app1", blazor1App =>
{
    blazor1App.Use(async (context, next) =>
    {
        if (!IsUrlWithExtension(context.Request.Path))
        {
            context.Request.Path = "/index.html";
        }
        await next();
    }); 
});

آدرس base رو هم باید داخل index.html تغییر بدیم و FileServer رو فعال کنیم و ...
توی این روش SSR رو هم از دست می دیم و چالش قرار دادن فایل های خروجی پروژه رو داخل پکیج داریم.
سعی کردم فایل index.html رو به index.razor تبدیل کنم و مسیر دهی از content/{package id}_ گذاشتم و قابلیت staticwebassets کار رو راحت کرده و دارم تستش می کنم ولی هنوز به نتیجه مطلوب نرسیدم.

به نظرتون این کار عملی است؟ اگر تجربه ای در ای زمینه دارید یا مقاله ای در این مورد است ممنون میشم راهنمایی کنید.

نظرات

  • وحید نصیری در ۱۴۰۳/۱۲/۰۱ ۲۱:۰۱
    این ویدیو، قدم به قدم، ابتدا یک پروژه‌ی ASP.NET Core 8x را شروع می‌کند (برای انجام کارهای Web API و ... هر نوع توسعه‌ی مرتبط متداول) و سپس یک پروژه‌ی دومی را هم اضافه می‌کند برای هاست Blazor Web Assembly که هر دوی این‌ها را با هم، در کنار هم فعال کرده و نمایش می‌دهد. در این پروژه هم Web API مربوط به ASP.NET Core کار می‌کند (و یا هر نوع مدل توسعه‌ی مرتبطی مانند MVC یا Razor pages و ...) و هم قسمت وب‌اسمبلی توسط هاست ASP.NET Core ارائه می‌شود. در حقیقت کار این ویدیو، بازسازی قالب قدیمی «Hosted Blazor WebAssembly app» است که در نگارش‌های جدید 8x/9x حذف شده. با این روش توسعه، مشکل Publish و کپی و مدیریت ارائه‌ی دستی هم وجود ندارد و همه چیز در نهایت یکپارچه‌است؛‌ در یک پروژه، کارهای ASP.NET Core 8x/9x را انجام می‌دهید و در پروژه‌ی دوم، کار توسعه‌ی وب اسمبلی را و در نهایت این‌ها به صورت یکپارچه کار کرده و Publish آن‌ها هم خودکار و یکپارچه‌است.

    • ایمان محمدی در ۱۴۰۳/۱۲/۰۱ ۲۳:۱۰
      مرسی وحید جان از ویدئو که گذاشتی، ازش دو تا نکته خوب بدست آوردم:
      کد : app.UseBlazorFrameworkFiles

      در ادامه حل نیازمندی مسئله:
      نوع پروژه کلاینت Microsoft.NET.Sdk.BlazorWebAssembly است که قابل پکیج شدن نیست. حتی اومدم خروجی پروژه رو Library گذاشتم.
      ولی موضوع این جا است که Program.cs پروژه کلاینت داره روت کامپوننت رو برای پروژه Blazor تعریف می کنه و پروژه رو بیلد و هاست می کنه:
      var builder = WebAssemblyHostBuilder.CreateDefault(args);
      builder.RootComponents.Add<App>("#app");
      builder.RootComponents.Add<HeadOutlet>("head::after");
      builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
      await builder.Build().RunAsync();

      - برای پکیچ کردن احتمالا باید نوع پروژه کلاینت Microsoft.NET.Sdk.Razor (RazorClassLibrary) باشد.
      - برای اجرای پروژه از آدرسی غیر از Root هم احتمالا بشه کاری کرد.
      - الان چالش اصلی فعلا محتویات Program.cs که داره RootComponents رو تعریف می کنه و پروژه رو بیلد و هاست می کنه رو در جایی که ما می خواهیم کانفیگ کنیم.
      مثل در پروژه میزبان وب و یا index.html یا index.razor احتمالی یه چیزی توی این مایه ها:

      Blazor
                  .start()
                  .then(() => {
                      const containerElement = document.querySelector('#app')
                      return Blazor.rootComponents.add(containerElement, 'app', {});
                  })
                  .catch((error) => console.error(error));

      • وحید نصیری در ۱۴۰۳/۱۲/۰۲ ۰۰:۰۳
        - RootComponent، مرتبط با مشخص کردن ابتدای درخت رندر کامپوننت‌ها است و ارتباطی به مسیر ارائه‌ی دسترسی به برنامه ندارد.
        - یک مثال قرار دادن یک پروژه‌ی Blazor WASM، در یک زیرپوشه‌ی راه‌حل مبتنی بر ASP.NET Core hosted، در اینجا هست.
        • ایمان محمدی در ۱۴۰۳/۱۲/۰۲ ۱۳:۱۳
          توی پاسخ ها این رو پیدا کردم که راه کاملی برای روش اول است:

          مشکل روش اول اینه که پکیچ nuget نمیشه ازش ساخت؛ روش دوم که از RazorClassLibrary استفاده می کنیم مسئله اینه که بایدRootComponentرو چطور معرفی کنیم؟ حالا یکم روش کار می کنم ببینم چی میشه ممنون.