How can I host a shared Blazor Custom Elements app on a different Domain?

Question

I tried to publish a Blazor app with custom elements on a Static Web App and reference it from another deployed app. Just added the necessary script tags pointing to the static web app.
It does not work.
Looking into the blazor.webassembly.js script it uses relative paths - obviously. But the problem is those paths will be relative to the page which is loaded from the other app.

Seemed possible to hack it by rewriting the url to blazor.boot.json as absolute urls. Ugly it is, but it did the job. However in that json there is another relative url. I changed that one also to be an absolute url. Sadly in that case the js code explicitly prefixes it with the document.baseURI. So I get the https://... twice :)

Well, I could go on with these hacks, but does not look good.
Isn't there a way to make it possible to deploy a reusable Blazor app like this (to be usable in multiple other MVC or angular or any app as custom elements without the need to deploy the Blazor files in those apps)?

Here is the why:

Our company has multiple applications. We also have a 'portal' to combine some functionalities of some applications. Mostly it is not too sophisticated - just displays the apps in IFrames. I do not like that solution. My idea was to create the new UI in Blazor. Using components and at the same time exposing some of them as custom elements. So I could deploy it as a static we app in azure. The portal would need only one or two lines of script references and it could use the custom elements.
However I have no control over the portal's repository, the portal is deployed at another cloud provider. So I cannot push the published files to their repo or deployment.

Answer 1

To host a shared Blazor Custom Elements app on a different domain, you can deploy the Blazor app as a standalone web app and reference it from other applications using the script tag. However, as you mentioned, the relative paths in the blazor.webassembly.js script will be relative to the page which is loaded from the other app. One way to solve this issue is to use absolute URLs in the script tags that reference the Blazor app. Another way is to use a CDN to host the Blazor app and reference it from other applications using the CDN URL. This way, the relative paths in the blazor.webassembly.js script will be relative to the CDN URL, which will be the same for all applications that reference the Blazor app.

Regarding your specific use case, you can deploy the Blazor app as a standalone web app in Azure and expose some of its components as custom elements. Then, you can reference these custom elements from other applications using the script tag. However, since you do not have control over the portal's repository and deployment, you cannot push the published files to their repo or deployment. In this case, you can use a CDN to host the Blazor app and reference it from the portal using the CDN URL. This way, you can update the Blazor app independently of the portal and all applications that reference it will get the latest version from the CDN.