Migrate from Konstrukt to Umbraco UI Builder

This guide provides a step-by-step approach to migrating a default Konstrukt solution to Umbraco UI Builder.

Key changes

Before outlining the exact steps, there are a few key changes to be aware of.

These changes will dictate the steps to take in the process of migrating to Umbraco UI Builder.

Project, Package, and Namespace changes

Step 1: Replace dependencies

In this first step, we will be replacing all existing Konstrukt dependencies with Umbraco UI Builder dependencies.

1. Remove any installed Konstrukt packages:

dotnet remove package Konstrukt

1. Delete the Konstrukt App_Plugins folder:

rmdir App_Plugins\Konstrukt

1. Install Umbraco.UIBuilder:

dotnet add package Umbraco.UIBuilder

1. Compile your project against .NET 7.0.

Step 2: Update namespaces and entity names

Based on the Key Changes outlined above update all Konstrukt references to the new Umbraco UI Builder alternatives. Ensure you update any Views/Partials that also reference these.

Step 3: Update your configuration

If all your configuration is in a single statement, it would be a case of swapping AddKonstrukt to AddUIBuilder. If you broke your configuration into multiple steps, or are using Action or Card classes, you will need to update the config builder/base classes. Those classes need to be updated to their UI Builder alternative names as detailed in Key Changes.

public class Startup
{
    ...
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddUmbraco(_env, _config)
            .AddBackOffice()
            .AddWebsite()
            .AddUIBuilder(cfg => {
                // The rest of your configuration
            })
            .AddComposers()
            .Build();
    }
    ...
}

Step 4: Finalizing the migration

1. Delete any obj/bin folders in your projects to ensure a clean build.

2. Recompile all projects and ensure all dependencies are restored correctly

3. Delete the existing Konstrukt license files in the umbraco\Licenses folder.

4. Add your new Umbraco.UIBuilder license key to the appSettings.json file:

"Umbraco": {
  "Licenses": {
    "Umbraco.UIBuilder": "YOUR_LICENSE_KEY"
  }
}

1. Run the project.