Elsa workflow designer errors

Question

I have completed the below tutorial to correctly configure a working elsa server

Part 2 of Building Workflow Driven .NET Applications with Elsa 2

I made modifications for running it with docker-compose allong with the dependant services.

Everything works as expected except the intellisense in the designer window.

Ive noticed a couple of errors in the browser console as below

this is my startup class

  public class Startup
    {
        public Startup(IConfiguration configuration, IWebHostEnvironment environment)
        {
            Configuration = configuration;
            Environment = environment;
        }

        private IConfiguration Configuration { get; }
        private IWebHostEnvironment Environment { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            var dbConnectionString = Configuration.GetConnectionString("Sqlite");

            // Razor Pages (for UI).
            services.AddRazorPages();

            // Hangfire (for background tasks).
            AddHangfire(services, dbConnectionString);

            // Elsa (workflows engine).
            AddWorkflowServices(services, dbConnectionString);

            // Allow arbitrary client browser apps to access the API for demo purposes only.
            // In a production environment, make sure to allow only origins you trust.
            services.AddCors(cors => cors.AddDefaultPolicy(policy => policy.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().WithExposedHeaders("Content-Disposition")));
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app
                .UseStaticFiles()
                .UseCors(cors => cors
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .SetIsOriginAllowed(_ => true)
                    .AllowCredentials())
                .UseRouting()
                .UseHttpActivities() // Install middleware for triggering HTTP Endpoint activities. 
                .UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapControllers(); // Elsa API Endpoints are implemented as ASP.NET API controllers.
                });
        }

        private void AddHangfire(IServiceCollection services, string dbConnectionString)
        {
            services
                .AddHangfire(config => config
                    // Use same SQLite database as Elsa for storing jobs. 
                    .UseSQLiteStorage(dbConnectionString)
                    .UseSimpleAssemblyNameTypeSerializer()

                    // Elsa uses NodaTime primitives, so Hangfire needs to be able to serialize them.
                    .UseRecommendedSerializerSettings(settings => settings.ConfigureForNodaTime(DateTimeZoneProviders.Tzdb)))
                .AddHangfireServer((sp, options) =>
                {
                    // Bind settings from configuration.
                    Configuration.GetSection("Hangfire").Bind(options);

                    // Configure queues for Elsa workflow dispatchers.
                    options.ConfigureForElsaDispatchers(sp);
                });
        }

        private void AddWorkflowServices(IServiceCollection services, string dbConnectionString)
        {
            services.AddWorkflowServices(dbContext => dbContext.UseSqlite(dbConnectionString));

            // Configure SMTP.
            services.Configure<SmtpOptions>(options => Configuration.GetSection("Elsa:Smtp").Bind(options));

            // Configure HTTP activities.
            services.Configure<HttpActivityOptions>(options => Configuration.GetSection("Elsa:Server").Bind(options));

            // Elsa API (to allow Elsa Dashboard to connect for checking workflow instances).
            services.AddElsaApiEndpoints();
        }
    }

this is my docker compose

version: '3.4'

services:
  workflow.web:
    image: ${DOCKER_REGISTRY-}workflowweb
    ports:
        - 5000:80
        - 5001:443
    build:
      context: .
      dockerfile: src/Workflow.Web/Dockerfile
    networks:
        - testnet

  email.service:
     image: rnwood/smtp4dev:linux-amd64-3.1.0-ci0856
     ports:
        - 3000:80
        - "2525:25"
     networks:
        - testnet

  elsa.dashboard:
     image: elsaworkflows/elsa-dashboard:latest
     ports:
        - "14000:80"
     environment:
        ELSA__SERVER__BASEADDRESS: "http://localhost:5000"
     networks:
        - testnet


networks:
  testnet:
    driver: bridge

Any ideas

Answer 1

Most likely the issue is that the docker image for the dashboard is not compatible with the workflow server hosted by your application.

The cause of this mismatch is that the blog post references Elsa 2.3 NuGet packages, while the dashboard docker image is built from the latest source code in the master branch (which is something that should be fixed to avoid confusion like you're experiencing).

To make the dashboard work (which is built against latest source code), you need to update your workflow server app to reference the latest Elsa preview packages from MyGet (which are also built against latest source code from the master branch).

The following documentation describes how to reference the MyGet feed: https://elsa-workflows.github.io/elsa-core/docs/next/installation/installing-feeds#myget