GitHub
Edit

Elsa Server + Studio (WASM)

In this topic, we will create an ASP.NET Core application that acts as both an Elsa Server and an Elsa Studio.

Instead of running Elsa Server and Elsa Studio as separate ASP.NET Core applications, you can also setup an ASP.NET Core application that hosts both the workflow server and the UI. The UI will still make HTTP calls to the backend as if they were hosted separately, but the difference is that they are now served from the same application and therefore deployable as a single unit.

For Elsa Studio, we will setup the Blazor parts using Blazor WebAssembly, which static files will be served from the ASP.NET Core host application.

Create Solution

In this chapter, we will scaffold a new solution and two projects:

  • The Host

  • The Client

The host will host both Elsa Server and the Blazor WebAssembly application representing Elsa Studio.

Run the following commands to create a solution with two projects:

# 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

Setup Host

In this chapter, we will setup the host, which will host both the Elsa Server engine as well as the webassembly files for serving the Elsa Studio client assets to the browser.

  1. Add Packages

    Add the following packages:

  2. Update Program.cs

    Open the Program.cs file in your project and replace its contents with the code provided below. This code does a lot of things like setting up database connections, enabling user authentication, and preparing the server to handle workflows.

    Program.cs

  3. Update appsettings.json

    Add the following configuration section to appsettings.json or appsettings.Development.json with the following content:

  4. Create _Host.cshtml

    To conclude the setup, create new folder called Pages and add a new file called _Host.cshtml and copy in the code showcased below:

    Pages/_Host.cshtml

Setup Client

Next, we will modify the client project.

  1. Add Elsa Studio Packages

    Navigate to the root directory of the client project and add the following Elsa Studio packages:

  2. Modify Program.cs

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

    Program.cs

  3. Modify MainLayout.razor

    Update Layout/MainLayout.razor with the following code listing:

    MainLayout.razor

Launch the Application

To see your application in action, navigate back to the root directory containing the host project:

Then execute the following command:

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

By default, you can log in using:

Source Code

The source code for this chapter can be found here

PreviousElsa StudioNextV2 to V3 Migration Guide

Last updated