Blazor routing fails in Azure DevOps iframe

4
votes

I have a simple Blazor website (source code) which has a routing issue when running in an iframe on Azure Devops but not elsewhere.

The application works fine when running under the following conditions

  • locally on my PC using Visual Studio (VS2019) using 'F5'
  • locally as a static site after having published the project to disc using the Visual Studio 'Publish' function
  • locally as a static site within an iframe of another unrelated site
  • remotely as a hosted static site after uploading the published site to a host
  • remotely as a static site within an iframe of another unrelated site (this second static site mimics AzureDevOps boards, using a different host name)

However when I generate an Azure Devops widget and upload it to the Visual Studio Marketplace Blazor routing fails and therefore the site fails to load correctly, as per this screenshot.

](Screenshot.PNG)[![dashboard screen shot

The source code for the site (which nothing more than a simplified version of the default VS Blazor template) can be found here.

Observations

  • all the blazor-related assets (i.e. Blazor & mono javascript files & various DLL files) are served up to the browser successfully
  • the blazor DLL runs successfully (i.e. Programs.cs kicks in successfully - Console.WriteLine statements in Program.cs and StartUp.cs prove this)
  • blazor fails to successfully find the default route and hence the <NotFoundContent> (defined in App.razor) tag is displayed within the Azure Devops iframe

Things I have tried to solve the issue

  • define the base href as "/" in wwwroot\index.html
  • define the base href as "/dist" in wwwroot\index.html
  • define the route in an index.cs file using a [Route] attribute
  • dynamic define the base href in wwwroot\index.html at runtime using javascript (this caters for any changes to the iframe parent URL by Microsoft)

Notes

1
azure-devopswidgetvsixblazor
Can't you find out which URL your app is receiving? It is running. – Henk Holterman
If I understand your comment correctly, you mean the iframe's parent URL - I identify that URL dynamically using javascript (see code here). But the issue only occurs in Azure DevOps - when using a different site for the iframe parent my app works totally fine. – Greg Trevellick
I've noticed that you are writing your base href after the content has loaded, when the base href should be part of the head section? Does that make a difference? – Jamie Rees
@Jamie Pretty sure setting the base href in the body makes no difference (surprisingly). when I set the base href in the body to a wrong value such as 'foobar' the assets fail to download, but when set to the correct value the assets do download. Even setting the base href in the head to what I am convinced is the correct value fails :-( – Greg Trevellick
I have additionally raised this with the Azure Devops team here, as it seems more Azure Devops centric than Blazor centric at this time. – Greg Trevellick

1 Answers

2
votes

The fix ultimately was related to, unsurprisingly, invalid routing.

Essentially one needs to redirect the user to the Blazor page itself using the NavigationManager as per the example below in app.razor, where the target razor page contains 

@page "/mypage"

@using Microsoft.AspNetCore.Components.Routing
@inject NavigationManager navigationManager
@{navigationManager.NavigateTo(@navigationManager.Uri.Replace("index.html", "") + "mypage");}

<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Index)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

A full example can be seen in the branch feature/StackOverflowFix here which has now been published to the Visual Studio Marketplace.