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

Elsa Studio Blazor Webassembly 设置指南

引言

在上一章节中，我们学习了如何在 ASP.NET 中设置工作流服务器，并探讨了如何使用 REST API 创建和执行工作流。

本章节中，我们将创建一个独立的 ASP.NET Blazor Webassembly 应用，用于托管连接到工作流服务器的 Elsa Studio。

设置步骤

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

  1. 创建一个新的 Blazor Webassembly 应用。
  2. 添加 Elsa Studio 包。
  3. 修改 Program.cs 文件。
  4. 移除多余的文件。
  5. 生成wwwroot/appsettings.json文件。
  6. 更新wwwroot/index.html文件。

接下来，我们将详细探讨每一步：

1. 创建新的 Blazor Webassembly 应用

使用以下命令生成一个新的 Blazor Webassembly 应用以启动项目：

dotnet new blazorwasm-empty -n "ElsaStudioBlazorWasm" -f net7.0

2. 添加 Elsa Studio 包

进入项目根目录，并集成以下 Elsa Studio 包：

cd ElsaStudioBlazorWasm
dotnet add package Elsa.Studio
dotnet add package Elsa.Studio.Core.BlazorWasm
dotnet add package Elsa.Studio.Login.BlazorWasm
dotnet add package Elsa.Api.Client

3. 修改 Program.cs

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

Program.cs

using Elsa.Studio.Dashboard.Extensions;
using Elsa.Studio.Shell;
using Elsa.Studio.Shell.Extensions;
using Elsa.Studio.Workflows.Extensions;
using Elsa.Studio.Contracts;
using Elsa.Studio.Core.BlazorWasm.Extensions;
using Elsa.Studio.Extensions;
using Elsa.Studio.Login.BlazorWasm.Extensions;
using Elsa.Studio.Login.HttpMessageHandlers;
using Elsa.Studio.Workflows.Designer.Extensions;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

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

// 注册根组件。
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.RootComponents.RegisterCustomElsaStudioElements();

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


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

// 执行每个启动任务。
var startupTaskRunner = app.Services.GetRequiredService<IStartupTaskRunner>();
await startupTaskRunner.RunStartupTasksAsync();

// 运行应用程序。
await app.RunAsync();

4. 移除不必要的文件

为了更清晰的项目结构，请删除以下目录和文件：

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

5. 生成 wwwroot/appsettings.json

在 wwwroot 目录下，新建一个 appsettings.json 文件，并填入如下内容：

appsettings.json

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

6. 更新 index.html

最后，打开 wwwroot/index.html 文件，并替换为以下代码：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>我的应用</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="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.Wasm.styles.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">
          加载中...
        </h5>
      </div>
    </div>

    <!-- 错误UI部分 -->
    <div id="blazor-error-ui">
      发生了一个未处理的错误。
      [刷新](/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.webassembly.js"></script>
  </body>
</html>

以上步骤完成后，你就成功设置了与工作流服务器相连的 Elsa Studio Blazor Webassembly 应用。

启动应用程序

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

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

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

用户名: admin 密码: password

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

接下来是什么？

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

在本文档中