Serve the Angular UI correctly under an HttpPathPrefix, and give CI node

Author: Jaben

.github/workflows/build.yml

@@ -22,6 +22,10 @@ on:
 
 env:
   DOTNET_VERSION: '10.0.x'
+  # The service embeds the Angular UI, so packaging needs node. Kept in step
+  # with the Dockerfile's node:22-alpine stage -- the container build and the
+  # Windows build must not compile the UI with different toolchains.
+  NODE_VERSION: '22.x'
   CONFIGURATION: Release
 
 jobs:
@@ -43,6 +47,13 @@ jobs:
         with:
           dotnet-version: ${{ env.DOTNET_VERSION }}
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: npm
+          cache-dependency-path: src/Papercut.Service/Web/package-lock.json
+
       - name: Install GitVersion
         uses: gittools/actions/gitversion/setup@v4.1.0
         with:

src/Papercut.Service/Application/StaticContent/StaticContentController.cs

@@ -1,4 +1,4 @@
-// Papercut
+// Papercut
 // 
 // Copyright © 2008 - 2012 Ken Robertson
 // Copyright © 2013 - 2025 Jaben Cargman
@@ -19,6 +19,7 @@
 namespace Papercut.Service.Application.StaticContent;
 
 using System.Reflection;
+using System.Text.RegularExpressions;
 
 public class StaticContentController : ControllerBase
 {
@@ -44,6 +45,17 @@ public class StaticContentController : ControllerBase
         { "webmanifest", "application/manifest+json" },
     };
 
+    /// <summary>
+    ///     The SPA ships with a root base href. When the service is mounted under an
+    ///     HttpPathPrefix that is wrong for every url the app builds from it, so the
+    ///     tag is rewritten on the way out to whatever prefix this request arrived on.
+    /// </summary>
+    static readonly Regex _baseHrefRegex = new(
+        @"<base\s+href\s*=\s*([""'])[^""']*\1",
+        RegexOptions.IgnoreCase | RegexOptions.Compiled);
+
+    const string IndexResource = "index.html";
+
     [HttpGet("{*anything}", Order = short.MaxValue)]
     [ResponseCache(
 #if DEBUG
@@ -52,7 +64,7 @@ public class StaticContentController : ControllerBase
         Duration = 600
 #endif
     )]
-    public IActionResult Get()
+    public async Task<IActionResult> Get()
     {
         var resourceName = GetRequestedResourceName(Request.Path);
         var resourceContent = GetResourceStream(resourceName);
@@ -61,7 +73,7 @@ public IActionResult Get()
         {
             // deep links into the Angular SPA (e.g. /message/{id}) fall back to index.html
             // so the client-side router can handle the route
-            resourceName = "index.html";
+            resourceName = IndexResource;
             resourceContent = GetResourceStream(resourceName);
         }
 
@@ -70,9 +82,26 @@ public IActionResult Get()
             return NotFound();
         }
 
+        if (string.Equals(resourceName, IndexResource, StringComparison.OrdinalIgnoreCase))
+        {
+            return Content(await ReadIndexWithBaseHrefAsync(resourceContent), "text/html", Encoding.UTF8);
+        }
+
         return new FileStreamResult(resourceContent, GetMimeType(resourceName));
     }
 
+    async Task<string> ReadIndexWithBaseHrefAsync(Stream content)
+    {
+        using var reader = new StreamReader(content, Encoding.UTF8);
+        var html = await reader.ReadToEndAsync();
+
+        // PathBase is what UsePathBase stripped off, i.e. exactly the prefix this
+        // request came in on. Empty when there is no prefix, giving "/" as before.
+        var baseHref = $"{Request.PathBase.Value?.TrimEnd('/')}/";
+
+        return _baseHrefRegex.Replace(html, match => $"<base href=\"{baseHref}\"", 1);
+    }
+
     static string GetRequestedResourceName(string requestUri)
     {
         var filename = requestUri

src/Papercut.Service/Web/src/app/services/environment.service.ts

@@ -22,12 +22,28 @@ export class EnvironmentService {
     return environment.name === 'staging';
   }
 
+  /**
+   * The configured paths are root-relative ('/api'), which is only correct when
+   * the app is served from the root. Under an HttpPathPrefix ('/webmail') every
+   * request has to carry that prefix, so both are resolved against the document
+   * base -- the server writes <base href> to match the prefix it is serving on.
+   *
+   * In dev, baseURI is http://localhost:4200/ and the paths come out unchanged,
+   * so the ng serve proxy still catches /api and /hubs.
+   */
   get apiBaseUrl(): string {
-    return environment.apiBaseUrl;
+    return this.resolveAgainstBase(environment.apiBaseUrl);
   }
 
   get signalRUrl(): string {
-    return environment.signalRUrl;
+    return this.resolveAgainstBase(environment.signalRUrl);
+  }
+
+  private resolveAgainstBase(path: string): string {
+    // an absolute url in config wins -- someone pointed this at another host
+    if (/^https?:\/\//i.test(path)) return path;
+
+    return new URL(path.replace(/^\/+/, ''), document.baseURI).toString().replace(/\/$/, '');
   }
 
   get isLoggingEnabled(): boolean {