Elsa 3.0 Help

Elsa Studio

In this topic, we will create a separate ASP.NET Blazor Webassembly ASP.NET Blazor Server app and turn it into an Elsa Studio that connects to the workflow server.

Setup

To setup Elsa Studio, we'll go through the following steps:

  1. Create a New Blazor Webassembly App

    Execute the following command in the terminal:

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

  2. Add Elsa Studio Packages

    Navigate to the root directory of your project and integrate the following Elsa Studio packages:

    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. Modify Program.cs

    Open the Program.cs file and replace its existing content with the code provided below:

    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; // Build the host. var builder = WebAssemblyHostBuilder.CreateDefault(args); var configuration = builder.Configuration; // Register root components. builder.RootComponents.Add<App>("#app"); builder.RootComponents.Add<HeadOutlet>("head::after"); builder.RootComponents.RegisterCustomElsaStudioElements(); // Register shell services and modules. 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(); // Build the application. var app = builder.Build(); // Run each startup task. var startupTaskRunner = app.Services.GetRequiredService<IStartupTaskRunner>(); await startupTaskRunner.RunStartupTasksAsync(); // Run the application. await app.RunAsync();

  4. Remove Unnecessary Files

    For a cleaner project structure, delete the following directories and files:

    • wwwroot/css

    • Pages

    • App.razor

    • MainLayout.razor

    • _Imports.razor

  5. Generate appsettings.json

    Within the wwwroot directory, create a new appsettings.json file and populate it with the following content:

    wwwroot/appsettings.json

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

  6. Update index.html

    To conclude the setup, open the index.html file and replace its content with the code showcased below:

    wwwroot/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>MyApplication</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="ElsaStudioBlazorWasm.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">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 src="_framework/blazor.webassembly.js"></script> </body> </html>

  1. Create a New Blazor Server App

    Kickstart your project by generating a new Blazor Server application using the following command:

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

  2. Add Elsa Studio Packages

    Navigate to the root directory of your project and integrate the following Elsa Studio packages:

    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. Modify Program.cs

    Open the Program.cs file and replace its existing content with the code provided below:

    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; // Build the host. var builder = WebApplication.CreateBuilder(args); var configuration = builder.Configuration; // Register Razor services. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(options => { // Register the root components. options.RootComponents.RegisterCustomElsaStudioElements(); }); // Register shell services and modules. 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(); // Configure SignalR. builder.Services.AddSignalR(options => { // Set MaximumReceiveMessageSize to handle large workflows. options.MaximumReceiveMessageSize = 5 * 1024 * 1000; // 5MB }); // Build the application. var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseResponseCompression(); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); // Run the application. app.Run();

  4. Remove Unnecessary Files

    For a cleaner project structure, eliminate the following directories and files:

    • wwwroot/css

    • Pages/Index.razor

    • App.razor

    • MainLayout.razor

  5. Update appsettings.json

    Update the appsettings.json file with the following content:

    appsettings.json

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

  6. Update _Host.cshtml

    To conclude the setup, open the _Host.cshtml file and replace its content with the code showcased below:

    Pages/_Host.cshtml

    @page "/" @using Elsa.Studio.Shell @using Microsoft.AspNetCore.Components.Web @namespace ElsaStudioBlazorServer.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <!DOCTYPE html> <html lang="en"> <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"> An error has occurred. This application may no longer respond until reloaded. </environment> <environment include="Development"> An unhandled exception has occurred. See browser dev tools for details. </environment> <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 src="_framework/blazor.server.js"></script> </body> </html>

Launch the Application

To see your application in action, execute the following command:

dotnet run --urls https://locahost:6001

Your application is now accessible at https://localhost:6001.

dotnet run --urls https://locahost:7001

Your application is now be accessible at https://localhost:7001.

By default, you can log in using:

username: admin password: password

Source Code

The source code for this chapter can be found here

The source code for this chapter can be found here

Last modified: 21 January 2024
Elsa ServerElsa Server + Studio