Embed Elsa Studio Blazor WASM in the same host

- Elsa.Studio.Wasm project (net9.0): WASM shell with Login/Dashboard/Workflows modules,
  reads its backend URL from a JS-injected window.getClientConfig() so the same build
  can point at any origin without a rebuild.
- Elsa.CustomServer:
    - references Elsa.Studio.Wasm as a project so `dotnet publish` emits its wwwroot/
    - UseBlazorFrameworkFiles + MapFallbackToPage('/_Host') serve the WASM app + SPA routes
    - Pages/_Host.cshtml renders the Studio shell and injects apiUrl at request time
- Bumped Elsa server packages to 3.5.3, Studio packages to 3.7.0 (Studio release train
  moved ahead of server; 3.7 Studio is compatible with 3.5 server API)
- Dockerfile: SDK/runtime 9.0, restores both csprojs before copying sources

Dockerfile

@@ -1,11 +1,12 @@
 # Elsa Custom Server — Docker image
 # Multi-stage build so the final image only carries the ASP.NET runtime.
 
-FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
+FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
 WORKDIR /source
 
 # Restore first for better layer caching.
 COPY src/Elsa.CustomServer/Elsa.CustomServer.csproj src/Elsa.CustomServer/
+COPY src/Elsa.Studio.Wasm/Elsa.Studio.Wasm.csproj src/Elsa.Studio.Wasm/
 RUN dotnet restore src/Elsa.CustomServer/Elsa.CustomServer.csproj
 
 # Then copy the rest and publish.
@@ -13,7 +14,7 @@ COPY src/ src/
 RUN dotnet publish src/Elsa.CustomServer/Elsa.CustomServer.csproj \
     -c Release -o /app/publish --no-restore /p:UseAppHost=false
 
-FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS runtime
+FROM mcr.microsoft.com/dotnet/aspnet:9.0 AS runtime
 WORKDIR /app
 COPY --from=build /app/publish ./
 

src/Elsa.CustomServer/Elsa.CustomServer.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <RootNamespace>Elsa.CustomServer</RootNamespace>
@@ -9,17 +9,23 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <!-- Elsa 3.x meta packages. Kept on the latest 3.x line so the Studio (elsa-studio-v3) can talk to us. -->
+    <!-- Elsa 3.7.x. Keeps parity with the Studio WASM's transitive Elsa.Api.Client. -->
-    <PackageReference Include="Elsa" Version="3.5.0" />
+    <PackageReference Include="Elsa" Version="3.5.3" />
-    <PackageReference Include="Elsa.Http" Version="3.5.0" />
+    <PackageReference Include="Elsa.Http" Version="3.5.3" />
-    <PackageReference Include="Elsa.Identity" Version="3.5.0" />
+    <PackageReference Include="Elsa.Identity" Version="3.5.3" />
-    <PackageReference Include="Elsa.Scheduling" Version="3.5.0" />
+    <PackageReference Include="Elsa.Scheduling" Version="3.5.3" />
-    <PackageReference Include="Elsa.Workflows.Api" Version="3.5.0" />
+    <PackageReference Include="Elsa.Workflows.Api" Version="3.5.3" />
-    <PackageReference Include="Elsa.EntityFrameworkCore" Version="3.5.0" />
+    <PackageReference Include="Elsa.EntityFrameworkCore" Version="3.5.3" />
-    <PackageReference Include="Elsa.EntityFrameworkCore.Sqlite" Version="3.5.0" />
+    <PackageReference Include="Elsa.EntityFrameworkCore.Sqlite" Version="3.5.3" />
-    <PackageReference Include="Elsa.CSharp" Version="3.5.0" />
+    <PackageReference Include="Elsa.CSharp" Version="3.5.3" />
-    <PackageReference Include="Elsa.JavaScript" Version="3.5.0" />
+    <PackageReference Include="Elsa.JavaScript" Version="3.5.3" />
-    <PackageReference Include="Elsa.Liquid" Version="3.5.0" />
+    <PackageReference Include="Elsa.Liquid" Version="3.5.3" />
+    <!-- Hosts the Blazor WebAssembly Studio in the same process. -->
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="9.0.13" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Elsa.Studio.Wasm\Elsa.Studio.Wasm.csproj" />
   </ItemGroup>
 
   <ItemGroup>

src/Elsa.CustomServer/Pages/_Host.cshtml

@@ -0,0 +1,59 @@
+@page "/"
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@inject IConfiguration Configuration
+@{
+    // The Studio talks to the API on the same origin. HTTP__BASEURL sets the public URL;
+    // Hosting:ApiPrefix defaults to /elsa/api which is where AddWorkflowsApi mounts.
+    var baseUrl = Configuration["Hosting:BaseUrl"] ?? Configuration["Http:BaseUrl"] ?? "";
+    var apiPrefix = (Configuration["Hosting:ApiPrefix"] ?? "elsa/api").TrimStart('/');
+    var apiUrl = string.IsNullOrEmpty(baseUrl)
+        ? "/" + apiPrefix
+        : baseUrl.TrimEnd('/') + "/" + apiPrefix;
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>Elsa Studio</title>
+    <base href="/" />
+    <link rel="apple-touch-icon" sizes="180x180" href="_content/Elsa.Studio.Shell/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="_content/Elsa.Studio.Shell/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="_content/Elsa.Studio.Shell/favicon-16x16.png">
+    <link rel="manifest" href="_content/Elsa.Studio.Shell/site.webmanifest">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
+    <link href="_content/Radzen.Blazor/css/material-base.css" rel="stylesheet">
+    <link href="_content/Elsa.Studio.Shell/css/shell.css" rel="stylesheet">
+    <link href="_content/Elsa.Studio.Workflows.Designer/designer.css" rel="stylesheet">
+</head>
+<body>
+<div id="app">
+    <div class="loading-splash mud-container mud-container-maxwidth-false">
+        <h5 class="mud-typography mud-typography-h5 mud-primary-text my-6">Loading...</h5>
+    </div>
+</div>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
+<script src="_content/BlazorMonaco/jsInterop.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
+<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
+<script src="_content/MudBlazor/MudBlazor.min.js"></script>
+<script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
+<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+<script>
+    window.getClientConfig = function () { return { "apiUrl": "@apiUrl" }; };
+</script>
+<script src="_framework/blazor.webassembly.js"></script>
+</body>
+</html>

src/Elsa.CustomServer/Program.cs

@@ -7,6 +7,7 @@ using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.HttpOverrides;
 
 var builder = WebApplication.CreateBuilder(args);
+builder.WebHost.UseStaticWebAssets();
 var configuration = builder.Configuration;
 var identitySection = configuration.GetSection("Identity");
 var identityTokenSection = identitySection.GetSection("Tokens");
@@ -34,7 +35,7 @@ builder.Services.AddElsa(elsa =>
         .UseLiquid(liquid => liquid.FluidOptions = options => options.Encoder = HtmlEncoder.Default);
 });
 
-// Studio (whichever host) is on a different origin, so allow it in.
+// Same-origin Studio, but keep CORS permissive to allow API access from other tools.
 builder.Services.AddCors(cors => cors.AddDefaultPolicy(p => p
     .AllowAnyHeader()
     .AllowAnyMethod()
@@ -42,6 +43,7 @@ builder.Services.AddCors(cors => cors.AddDefaultPolicy(p => p
     .WithExposedHeaders("x-elsa-workflow-instance-id")));
 
 builder.Services.AddHealthChecks();
+builder.Services.AddRazorPages();
 
 // Traefik terminates TLS in front of us; without this, self-generated URLs come out as http://
 builder.Services.Configure<ForwardedHeadersOptions>(o =>
@@ -54,14 +56,16 @@ builder.Services.Configure<ForwardedHeadersOptions>(o =>
 var app = builder.Build();
 
 app.UseForwardedHeaders();
-app.UseCors();
+app.UseBlazorFrameworkFiles();
+app.UseStaticFiles();
 app.UseRouting();
+app.UseCors();
 app.UseAuthentication();
 app.UseAuthorization();
 app.UseWorkflowsApi();
 app.UseWorkflows();
 app.UseJsonSerializationErrorHandler();
 app.MapHealthChecks("/health");
-app.MapGet("/", () => Results.Ok(new { name = "Elsa Custom Server", status = "ok" }));
+app.MapFallbackToPage("/_Host");
 
 app.Run();

src/Elsa.Studio.Wasm/Elsa.Studio.Wasm.csproj

@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <RootNamespace>Elsa.Studio.Wasm</RootNamespace>
+    <AssemblyName>Elsa.Studio.Wasm</AssemblyName>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Elsa.Studio" Version="3.7.0" />
+    <PackageReference Include="Elsa.Studio.Core.BlazorWasm" Version="3.7.0" />
+    <PackageReference Include="Elsa.Studio.Login.BlazorWasm" Version="3.7.0" />
+    <PackageReference Include="Elsa.Studio.Authentication.ElsaIdentity.BlazorWasm" Version="3.7.0" />
+    <PackageReference Include="Elsa.Studio.Workflows" Version="3.7.0" />
+    <PackageReference Include="Elsa.Studio.Dashboard" Version="3.7.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="9.0.13" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.13" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.13" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.Extensions.Http" Version="9.0.13" />
+  </ItemGroup>
+
+</Project>

src/Elsa.Studio.Wasm/MainLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<main>
+    @Body
+</main>

src/Elsa.Studio.Wasm/Program.cs

@@ -0,0 +1,51 @@
+using System.Text.Json;
+using Elsa.Studio.Contracts;
+using Elsa.Studio.Core.BlazorWasm.Extensions;
+using Elsa.Studio.Dashboard.Extensions;
+using Elsa.Studio.Extensions;
+using Elsa.Studio.Authentication.ElsaIdentity.BlazorWasm.Extensions;
+using Elsa.Studio.Login.BlazorWasm.Extensions;
+using Elsa.Studio.Login.HttpMessageHandlers;
+using Elsa.Studio.Models;
+using Elsa.Studio.Options;
+using Elsa.Studio.Shell;
+using Elsa.Studio.Shell.Extensions;
+using Elsa.Studio.Workflows.Designer.Extensions;
+using Elsa.Studio.Workflows.Extensions;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+builder.RootComponents.RegisterCustomElsaStudioElements();
+
+var backendApiConfig = new BackendApiConfig
+{
+    ConfigureBackendOptions = options => builder.Configuration.GetSection("Backend").Bind(options),
+    ConfigureHttpClientBuilder = options => options.AuthenticationHandler = typeof(AuthenticatingApiHttpMessageHandler)
+};
+
+builder.Services.AddCore();
+builder.Services.AddShell();
+builder.Services.AddRemoteBackend(backendApiConfig);
+builder.Services.AddLoginModule();
+builder.Services.AddElsaIdentity();
+builder.Services.AddDashboardModule();
+builder.Services.AddWorkflowsModule();
+
+var app = builder.Build();
+
+// Read the backend URL from the JS-injected client config (baked into _Host.cshtml).
+var js = app.Services.GetRequiredService<IJSRuntime>();
+var clientConfig = await js.InvokeAsync<JsonElement>("getClientConfig");
+var apiUrl = clientConfig.GetProperty("apiUrl").GetString()!;
+app.Services.GetRequiredService<IOptions<BackendOptions>>().Value.Url = new Uri(apiUrl);
+
+var startupTaskRunner = app.Services.GetRequiredService<IStartupTaskRunner>();
+await startupTaskRunner.RunStartupTasksAsync();
+
+await app.RunAsync();

src/Elsa.Studio.Wasm/_Imports.razor

@@ -0,0 +1,6 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop

src/Elsa.Studio.Wasm/wwwroot/appsettings.json

@@ -0,0 +1,5 @@
+{
+  "Backend": {
+    "Url": "/elsa/api"
+  }
+}