Scraping Meta-Data using Blazor WASM in the back office
d
Cross-Origin Resource Sharing issues
Some of you may be aware I am attempting to create a Blazor WASM app to see how V14 deals with web components created using .Net C#. The example I wanted to try was originally created as a simple Razor page: https://metadata-to-json-2023-04-21.azurewebsites.net/Scraper It is a scraper that I intended to use as the property editor for a Link Library in Umbraco. For it to work in V14 it must be a Web Component which is not 'currently' possible with Razor Pages but is possible with Razor Components using Blazor Web Assembly (WASM). When I originally created the app I was aware that I had to enable Cross-Origin Resource Sharing (CORS) on the Azure Web App i.e. running on the server. What I had not predicted (which is obvious now) is using this with a Web Component running client side in the browser the fetch request would be blocked by the CORS Policy of the server of the site we are attempting to scrape. Further research shows me that it's possible to host a Blazor WebAssembly app within an ASP.NET Core application that also serves Razor Pages, MVC controllers, or Web APIs. So I could integrate Razor Pages functionality into a project that primarily serves a Blazor WebAssembly app by setting up an ASP.NET Core host project that serves both the Blazor WebAssembly app and the Razor Pages.
This is what CoPilot suggests: 1. Create an ASP.NET Core Hosted Blazor WebAssembly App: When creating a new Blazor WebAssembly app, choose the option to create it as an "ASP.NET Core hosted" application. This option sets up a solution with three projects: a client project for the Blazor WebAssembly app, a server project for the ASP.NET Core app, and a shared project for shared models. 2. Add Razor Pages to the Server Project: In the server project, you can add Razor Pages by first ensuring the necessary services and middleware are configured in Startup.cs. • Add services in ConfigureServices:
Copy code
public void ConfigureServices(IServiceCollection services)
     {
         services.AddControllersWithViews();
         services.AddRazorPages(); // Add this line
     }
• Configure the middleware in Configure:
Copy code
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
     {
         // Existing middleware configurations

         app.UseEndpoints(endpoints =>
         {
             endpoints.MapRazorPages(); // Add this line
             endpoints.MapControllers();
             endpoints.MapBlazorHub();
             endpoints.MapFallbackToFile("index.html");
         });
     }
3. Create Razor Pages: In the server project, add a new folder named Pages if it doesn't already exist, and then add your Razor Pages there. These pages will be served by the ASP.NET Core server and can coexist with the Blazor WebAssembly app. 4. Run Your Application: When you run your application, the server will be able to serve both the Razor Pages and the Blazor WebAssembly app. Requests to URLs that match Razor Pages will be handled by those pages, while other requests can fallback to the Blazor app.
> This setup allows you to leverage server-side capabilities, such as Razor Pages for certain parts of your application, while still using Blazor WebAssembly for the client-side interactive parts. It's a powerful combination that lets you utilize the strengths of both server-side and client-side development within the same application.
My question is: Is this practical in an Umbraco Project? Could the host project be an RCL?
82 Views