Elsa Workflows 3: Elsa Server

https://docs.elsaworkflows.io/application-types/elsa-server
Admin
Elsa Server is an ASP.NET Core web application component of Elsa Workflows 3 that allows users to...
Tokens:3,909
Snippets:38
Trust Score:5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Add Elsa Project Packages

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Installs the required Elsa packages and related dependencies for your project using the .NET CLI.

```bash
dotnet add package Elsa
dotnet add package Elsa.EntityFrameworkCore
dotnet add package Elsa.EntityFrameworkCore.Sqlite
dotnet add package Elsa.Http
dotnet add package Elsa.Identity
dotnet add package Elsa.Scheduling
dotnet add package Elsa.Workflows.Api
dotnet add package Elsa.CSharp
dotnet add package Elsa.JavaScript
dotnet add package Elsa.Liquid
dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Server
```

--------------------------------

### Add Elsa Packages

Source: https://docs.elsaworkflows.io/application-types/elsa-server

Install essential Elsa packages for workflow management, persistence, API, and various activity types.

```bash
dotnet add package Elsa
dotnet add package Elsa.EntityFrameworkCore
dotnet add package Elsa.EntityFrameworkCore.Sqlite
dotnet add package Elsa.Http
dotnet add package Elsa.Identity
dotnet add package Elsa.Scheduling
dotnet add package Elsa.Workflows.Api
dotnet add package Elsa.CSharp
dotnet add package Elsa.Http
dotnet add package Elsa.JavaScript
dotnet add package Elsa.Liquid
```

--------------------------------

### Create Solution and Projects

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Run these commands to scaffold a new .NET solution with separate projects for the Elsa Server host and the Elsa Studio client (Blazor WebAssembly).

```bash
# Create a new solution
dotnet new sln -n ElsaServerAndStudio

# Create the host project
dotnet new web -n "ElsaServer"

# Add the host project to the solution
dotnet sln add ElsaServer/ElsaServer.csproj

# Create the client project
dotnet new blazorwasm -n "ElsaStudio"

# Add the client project to the solution
dotnet sln add ElsaStudio/ElsaStudio.csproj

# Navigate to the directory where the host project is located
cd ElsaServer

# Add a reference to the client project
dotnet add reference ../ElsaStudio/ElsaStudio.csproj
```

--------------------------------

### Navigate to Project Directory

Source: https://docs.elsaworkflows.io/application-types/elsa-server

Change the current directory to the newly created 'ElsaServer' project folder.

```bash
cd ElsaServer
```

--------------------------------

### Add Elsa Studio Packages

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Navigate to the client project's root directory and use the dotnet CLI to add the required Elsa Studio packages.

```bash
cd ../ElsaStudio
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
```

--------------------------------

### Create New ASP.NET Project

Source: https://docs.elsaworkflows.io/application-types/elsa-server

Use this command to create a new ASP.NET Core Web Application project named 'ElsaServer'.

```bash
dotnet new web -n "ElsaServer"
```

--------------------------------

### Run Elsa Server Application

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Navigate to the host project directory and run the server using the dotnet CLI. Provides default login credentials.

```bash
cd ../ElsaServer
dotnet run --urls https://localhost:5001
```

--------------------------------

### Configure Program.cs for Elsa Server

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Sets up the Elsa Server application, including dependency injection, database configuration (SQLite), authentication, and API endpoints. Ensure to replace 'large-signing-key-for-signing-JWT-tokens' with a secure key.

```csharp
using Elsa.EntityFrameworkCore.Extensions;
using Elsa.EntityFrameworkCore.Modules.Management;
using Elsa.EntityFrameworkCore.Modules.Runtime;
using Elsa.Extensions;
using Microsoft.AspNetCore.Mvc;

var builder = WebApplication.CreateBuilder(args);
bulder.WebHost.UseStaticWebAssets();

var services = builder.Services;
var configuration = builder.Configuration;

services
    .AddElsa(elsa => elsa
        .UseIdentity(identity =>
        {
            identity.TokenOptions = options => options.SigningKey = "large-signing-key-for-signing-JWT-tokens";
            identity.UseAdminUserProvider();
        })
        .UseDefaultAuthentication()
        .UseWorkflowManagement(management => management.UseEntityFrameworkCore(ef => ef.UseSqlite()))
        .UseWorkflowRuntime(runtime => runtime.UseEntityFrameworkCore(ef => ef.UseSqlite()))
        .UseScheduling()
        .UseJavaScript()
        .UseLiquid()
        .UseCSharp()
        .UseHttp(http => http.ConfigureHttpOptions = options => configuration.GetSection("Http").Bind(options))
        .UseWorkflowsApi()
        .AddActivitiesFrom<Program>()
        .AddWorkflowsFrom<Program>()
    );

services.AddCors(cors => cors.AddDefaultPolicy(policy => policy.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().WithExposedHeaders("*")));
services.AddRazorPages(options => options.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute()));

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.MapStaticAssets();
app.UseRouting();
app.UseCors();
app.UseStaticFiles();
app.UseAuthentication();
app.UseAuthorization();
app.UseWorkflowsApi();
app.UseWorkflows();
app.MapFallbackToPage("/_Host");
app.Run();
```

--------------------------------

### Run Elsa Server Application

Source: https://docs.elsaworkflows.io/application-types/elsa-server

Execute this command in the terminal to launch the Elsa Server application, specifying the URLs it should listen on.

```bash
dotnet run --urls "https://localhost:5001"
```

--------------------------------

### Create _Host.cshtml for Elsa Studio

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Sets up the main Blazor host page for Elsa Studio, defining metadata, theme links, and script references. It dynamically constructs the API URL based on the request scheme and host.

```cshtml
@page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    var baseUrl = $"{Request.Scheme}://{Request.Host}";
    var apiUrl = baseUrl + Url.Content("~/elsa/api");
    var basePath = "";
}

<!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>Elsa Studio 3.0</title>
    <base href="/"/>
    <link rel="apple-touch-icon" sizes="180x180" href="@basePath/_content/Elsa.Studio.Shell/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="@basePath/_content/Elsa.Studio.Shell/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="@basePath/_content/Elsa.Studio.Shell/favicon-16x16.png">
    <link rel="manifest" href="@basePath/_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="@basePath/_content/MudBlazor/MudBlazor.min.css" rel="stylesheet"/>
    <link href="@basePath/_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet"/>
    <link href="@basePath/_content/Radzen.Blazor/css/material-base.css" rel="stylesheet">

```

--------------------------------

### Modify Program.cs for Elsa Studio

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Replace the existing content of Program.cs with this code to register Elsa Studio services and modules, and configure the HTTP client.

```csharp
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.Login.BlazorWasm.Extensions;
using Elsa.Studio.Login.Extensions;
using Elsa.Studio.Login.HttpMessageHandlers;
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;

// Build the host.
var builder = WebAssemblyHostBuilder.CreateDefault(args);

// 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(new()
{
    ConfigureHttpClientBuilder = options => options.AuthenticationHandler = typeof(AuthenticatingApiHttpMessageHandler)
});
builder.Services
    .AddLoginModule()
    .UseElsaIdentity();

builder.Services.AddDashboardModule();
builder.Services.AddWorkflowsModule();
builder.Services.UseElsaIdentity();


// Build the application.
var app = builder.Build();

// Apply client config.
var js = app.Services.GetRequiredService<IJSRuntime>();
var clientConfig = await js.InvokeAsync<JsonElement>("getClientConfig");
var apiUrl = clientConfig.GetProperty("apiUrl").GetString() ?? throw new InvalidOperationException("No API URL configured.");
app.Services.GetRequiredService<IOptions<BackendOptions>>().Value.Url = new(apiUrl);

// Run each startup task.
var startupTaskRunner = app.Services.GetRequiredService<IStartupTaskRunner>();
await startupTaskRunner.RunStartupTasksAsync();

// Run the application.
await app.RunAsync();
```

--------------------------------

### Configure Elsa Server in Program.cs

Source: https://docs.elsaworkflows.io/application-types/elsa-server

This C# code configures the Elsa Server, setting up workflow management, runtime, identity, API endpoints, real-time updates, and various activity integrations.

```csharp
using Elsa.EntityFrameworkCore.Extensions;
using Elsa.EntityFrameworkCore.Modules.Management;
using Elsa.EntityFrameworkCore.Modules.Runtime;
using Elsa.Extensions;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddElsa(elsa =>
{
    // Configure Management layer to use EF Core.
    elsa.UseWorkflowManagement(management => management.UseEntityFrameworkCore(ef => ef.UseSqlite()));

    // Configure Runtime layer to use EF Core.
    elsa.UseWorkflowRuntime(runtime => runtime.UseEntityFrameworkCore(ef => ef.UseSqlite()));

    // Default Identity features for authentication/authorization.
    elsa.UseIdentity(identity =>
    {
        identity.TokenOptions = options => options.SigningKey = "sufficiently-large-secret-signing-key"; // This key needs to be at least 256 bits long.
        identity.UseAdminUserProvider();
    });

    // Configure ASP.NET authentication/authorization.
    elsa.UseDefaultAuthentication(auth => auth.UseAdminApiKey());

    // Expose Elsa API endpoints.
    elsa.UseWorkflowsApi();

    // Setup a SignalR hub for real-time updates from the server.
    elsa.UseRealTimeWorkflows();

    // Enable C# workflow expressions
    elsa.UseCSharp();
    
    // Enable JavaScript workflow expressions
    elsa.UseJavaScript(options => options.AllowClrAccess = true);

    // Enable HTTP activities.
    elsa.UseHttp(options => options.ConfigureHttpOptions = httpOptions => httpOptions.BaseUrl = new("https://localhost:5001"));

    // Use timer activities.
    elsa.UseScheduling();

    // Register custom activities from the application, if any.
    elsa.AddActivitiesFrom<Program>();

    // Register custom workflows from the application, if any.
    elsa.AddWorkflowsFrom<Program>();
});

// Configure CORS to allow designer app hosted on a different origin to invoke the APIs.
builder.Services.AddCors(cors => cors
    .AddDefaultPolicy(policy => policy
        .AllowAnyOrigin() // For demo purposes only. Use a specific origin instead.
        .AllowAnyHeader()
        .AllowAnyMethod()
        .WithExposedHeaders("x-elsa-workflow-instance-id"))); // Required for Elsa Studio in order to support running workflows from the designer. Alternatively, you can use the `*` wildcard to expose all headers.

// Add Health Checks.
builder.Services.AddHealthChecks();

// Build the web application.
var app = builder.Build();

// Configure web application's middleware pipeline.
app.UseCors();
app.UseRouting(); // Required for SignalR.
app.UseAuthentication();
app.UseAuthorization();
app.UseWorkflowsApi(); // Use Elsa API endpoints.
app.UseWorkflows(); // Use Elsa middleware to handle HTTP requests mapped to HTTP Endpoint activities.
app.UseWorkflowsSignalRHubs(); // Optional SignalR integration. Elsa Studio uses SignalR to receive real-time updates from the server. 

app.Run();

```

--------------------------------

### Configure HTTP Settings in appsettings.json

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Defines the base URL and API path for HTTP-based workflow interactions. This configuration is used by the Elsa.Http module.

```json
{
    "Http": {
        "BaseUrl": "https://localhost:5001",
        "BasePath": "/api/workflows"
    }
}
```

--------------------------------

### Update MainLayout.razor

Source: https://docs.elsaworkflows.io/application-types/elsa-server-%2B-studio-wasm

Modify the MainLayout.razor file to include the main content area for the application.

```razor
@inherits LayoutComponentBase

<main>
    @Body
</main>
```
Tokens:
Raw