title: Host sub apps in Blazor Server with the sub app fallback pointing to the sub index page
body: <p>So the long story short is, I want sub-domains for a Blazor app. Less significant is that I have a URL rewrite in Azure that will rewrite the URL to the nested app.</p>
  <p>What I am trying to achieve is the following.</p>
  <ul>
  <li>When navigating to the <code>www.sample.com</code> it hits the main Blazor app in the root</li>
  <li>When navigating to the <code>admin.sample.com</code> azure rewrites the address to <code>www.sample.com/admin</code>, the users still sees <code>admin.sample.com</code> however the app falls back to the sub app index (not the root index)</li>
  </ul>
  <p>Note, that the rewrites only purpose in life is to inject <code>/admin</code> in to the url, in light of that, it's prudent that the sub apps index works correctly. That's to say, <code>www.sample.com/admin</code> should fall back to its nested <code>www.sample.com/admin/index</code> otherwise I can't rewrite the following type scenarios  <code>admin.sample.com/help</code> -&gt; <code>www.sample.com/admin/help</code> etc.</p>
  <p>So to reiterate, ignore the rewrite and the subdomains. I need to achieve the following</p>
  <ul>
  <li><code>www.sample.com</code> - loads <code>www.sample.com/index.razor</code> with <code>www.sample.com/_host.cshtml</code></li>
  <li><code>www.sample.com/admin</code> - loads <code>www.sample.com/admin/index.razor</code>  with <code>www.sample.com/admin/_host.cshtml</code></li>
  </ul>
  <p>For reference, here are some pages I have been trying to work through</p>
  <ul>
  <li><a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-5.0&amp;tabs=visual-studio" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-5.0&amp;tabs=visual-studio</a></li>
  <li><a href="https://stackoverflow.com/questions/60972771/blazor-multiple-host-cshtml">Blazor multiple _Host.cshtml</a></li>
  <li><a href="https://github.com/dotnet/aspnetcore/issues/19744" rel="nofollow noreferrer">https://github.com/dotnet/aspnetcore/issues/19744</a></li>
  </ul>
  <p>Following the above advice and what I can glean from the documentation, my current structure is as follows</p>
  <ul>
  <li><p>/</p>
  <ul>
  <li>_host.cshtml
  <ul>
  <li><code>@page &quot;/&quot;</code></li>
  <li><code>&lt;base href=&quot;~/&quot; /&gt;</code></li>
  </ul>
  </li>
  <li>Index.razor
  <ul>
  <li><code>@page &quot;/&quot;</code></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><p>/Admin</p>
  <ul>
  <li>_host.cshtml
  <ul>
  <li><code>@page &quot;/Admin&quot;</code></li>
  <li><code>&lt;base href=&quot;~/Admin/&quot; /&gt;</code></li>
  </ul>
  </li>
  <li>Index.razor
  <ul>
  <li><code>@page &quot;/index&quot;</code></li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p><strong>Startup Configure</strong></p>
  <pre><code>app.UsePathBase(&quot;/Admin&quot;); // &lt;- honestly I have no idea why this is needed
    
  app.UseEndpoints(endpoints =&gt;
  {
      endpoints.MapControllers();
      endpoints.MapBlazorHub();
      endpoints.MapFallbackToPage(&quot;/_Host&quot;);
      endpoints.MapFallbackToPage(&quot;~/Admin/{*path:nonfile}&quot;, &quot;/_Host&quot;);
  });
  </code></pre>
  <p><strong>So here are the problems</strong></p>
  <p>Ignoring the rewrites. The above works for</p>
  <ul>
  <li><code>www.sample.com</code> This uses the root <code>/_Host</code> and falls back to the root index as expected</li>
  <li><code>www.sample.com/admin/index</code> This doesn't work, it uses the <code>/_Host</code> and displays the <code>admin/index</code></li>
  <li><code>www.sample.com/admin</code> This doesn't work, it uses the <code>admin/_Host</code> and loads the root index (not the <code>admin/index</code>)</li>
  </ul>
  <p><strong>What I have tried</strong></p>
  <ul>
  <li><code>/Admin/Index.razor</code> with <code>@page &quot;/&quot;</code>. This gives and ambiguous route</li>
  <li>I have tried many permutations of <code>MapFallbackToPage</code>, <code>app.UsePathBase</code>, <code>&lt;base&gt;</code></li>
  <li>I have also even tried moving the root to its own directory. URL rewrites would support that. However, it causes many of the same issues.</li>
  </ul>
  <p>My gut feeling now, it's impossible to get sub apps to work correctly with hosts and fallbacks to the sub index.</p>
  <p>Is there another way to solve this problem? or am I writing a completely separate app?</p>