抠丁客 抠丁客
项目
版本
编辑 (2024/7/8)

Elsa Studio Blazor Server 搭建

引言

在上一章节中，我们学习了如何在 Blazor Webassembly 项目中设置 Elsa Studio。

本章节中，我们将创建相同的应用程序，但这次采用 Blazor Server 实现。

何时使用 Blazor Server？

尽管 Blazor Webassembly 应用是开始使用 Elsa Studio 的绝佳方式，但在编写需要调试的自定义扩展时可能具有挑战性。 当使用 Blazor Server 运行应用时，调试会变得更加简单。

设置步骤

为了设置 Elsa Studio，我们将通过以下步骤进行：

  1. 创建一个新的 Blazor Server 应用。
  2. 添加 Elsa Studio 包。
  3. 修改 Program.cs 文件。
  4. 移除多余的文件。
  5. 更新 appsettings.json 文件。
  6. 更新 Pages/_Host.cshtml 文件。

让我们详细探讨每个步骤：

1. 创建新的 Blazor Server 应用

使用以下命令生成一个新的 Blazor Server 应用程序来启动你的项目：

dotnet new blazorserver-empty -n "ElsaStudioBlazorServer" -f net7.0

2. 添加 Elsa Studio 包

导航到项目的根目录，并集成以下 Elsa Studio 包：

cd ElsaStudioBlazorServer
dotnet add package Elsa.Studio
dotnet add package Elsa.Studio.Core.BlazorServer
dotnet add package Elsa.Studio.Login.BlazorServer
dotnet add package Elsa.Api.Client

3. 修改 Program.cs

打开 Program.cs 文件并用下面提供的代码替换其现有内容：

Program.cs

using Elsa.Studio.Core.BlazorServer.Extensions;
using Elsa.Studio.Dashboard.Extensions;
using Elsa.Studio.Extensions;
using Elsa.Studio.Login.BlazorServer.Extensions;
using Elsa.Studio.Login.HttpMessageHandlers;
using Elsa.Studio.Shell.Extensions;
using Elsa.Studio.Workflows.Extensions;
using Elsa.Studio.Workflows.Designer.Extensions;

// 构建主机。
var builder = WebApplication.CreateBuilder(args);
var configuration = builder.Configuration;

// 注册Razor服务。
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor(options =>
{
    // 注册根组件。
    options.RootComponents.RegisterCustomElsaStudioElements();
});

// 注册壳服务和模块。
builder.Services.AddCore();
builder.Services.AddShell(options => configuration.GetSection("Shell").Bind(options));
builder.Services.AddRemoteBackend(
    elsaClient => elsaClient.AuthenticationHandler = typeof(AuthenticatingApiHttpMessageHandler),
    options => configuration.GetSection("Backend").Bind(options));
builder.Services.AddLoginModule();
builder.Services.AddDashboardModule();
builder.Services.AddWorkflowsModule();

// 配置SignalR。
builder.Services.AddSignalR(options =>
{
    // 设置MaximumReceiveMessageSize以处理大型工作流。
    options.MaximumReceiveMessageSize = 5 * 1024 * 1000; // 5MB
});

// 构建应用。
var app = builder.Build();

// 配置HTTP请求管道。
if (!app.Environment.IsDevelopment())
{
    app.UseResponseCompression();

    // 默认的HSTS值是30天。对于生产环境，你可能需要更改这个设置，详情请见 https://aka.ms/aspnetcore-hsts。
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

// 运行应用。
app.Run();

4. 移除不必要的文件

为了获得更干净的项目结构，请删除以下目录和文件：

  • wwwroot/css
  • Pages/Index.razor
  • App.razor
  • MainLayout.razor

5. 更新 appsettings.json

更新 appsettings.json 文件，添加以下内容：

{
  "Backend": {
    "Url": "https://localhost:5001/elsa/api"
  }
}

6. 更新 _Host.cshtml

最后，打开 Pages/_Host.cshtml 文件，并将其内容替换为下面展示的代码：

_Host.cshtml

@page "/"
@using Elsa.Studio.Shell 
@using Microsoft.AspNetCore.Components.Web
@namespace ElsaStudioBlazorServer.Pages 
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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="https://fonts.googleapis.com/css2?family=Grandstander:wght@100&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="Elsa.Studio.Host.Server.styles.css" rel="stylesheet">
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
  </head>
  <body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
      <environment include="Staging,Production">
        发生错误。此应用可能不再响应，直到重新加载。
      </environment>
      <environment include="Development">
        发生了一个未处理的异常。请查看浏览器开发者工具获取详细信息。
      </environment>
      [重新加载](/docs/zh-Hans/elsa-workflow-docs/latest/Installation/)
      <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 src="_framework/blazor.server.js"></script>
  </body>
</html>

启动应用程序

要查看您的应用程序实际运行效果，请执行以下命令：

dotnet run --urls "https://localhost:7001"

现在，您的应用程序应该可以在 https://localhost:7001 访问了。默认情况下，您可以使用以下凭据登录：

用户名: admin 密码: password

源代码
本章节的源代码可在此处找到：点击这里

接下来是什么？

在接下来的章节中，我们将探索 Elsa Studio 应用程序的自定义可能性。敬请期待！

在本文档中