Search code examples
jekyllgithub-pagesblazor

Embedding Blazor into a Jekyll blog. the uri is not contained by the base URI

I am working on embedding my blazor app into my github pages site using jekyll. My blazor app uses no navigation. However, I am getting this error:

System.ArgumentException: The URI 'http://localhost:4000/blog/2020/05/01/XamlTemplates' is not contained by the base URI 'http://localhost:4000/blazor/XamlTemplates/'.

This is my page_blazor.html in the _includes folder to embed into various pages of the site

<script src="js/index.js"></script>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>

This works if the index.html file is in the same folder as the "_framework" folder. This is how I am using it in my blog:

---
title: Xaml Templates
date: 2020-05-01
layout: post
name: Razor for Xaml
baseUrl: /blazor/XamlTemplates/
---

{% include page_blazor.html %}

The url for this blog post is different than the baseUrl that blazor uses. This is what is causing the exception. Does anyone know if there is a way to fix this? Why do we have to specify the base Url? Is there a way to turn off the blazor navigation. What I want to avoid is having to copy and paste the dlls everywhere I want to use them in my site.

Solution

  • A base url is used for navigation and physical file dependencies.

    Even if you're not using navigation, if you load a page a few steps down in your site hierarchy, your application still needs the ability to get back to the application root in order to fetch your wasm dlls. Fortunately this is easily accomplished by adding <base href="/blazor"> to your page.

    Microsoft provides excellent documentation for this