1 of 1

Migrate from Konstrukt to Umbraco UI Builder

Learn how to migrate a Konstrukt solution 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

Konstrukt

Umbraco UI Builder

Konstrukt.Core

Umbraco.UIBuilder.Core

Konstrukt.Infrastructure

Umbraco.UIBuilder.Infrastructure

Konstrukt.Web

Umbraco.UIBuilder.Web

Konstrukt.Web.UI

Umbraco.UIBuilder.Web.StaticAssets

Konstrukt.Startup

Umbraco.UIBuilder.Startup

Konstrukt

Umbraco.UIBuilder

C# Class changes

Namespace changes as documented above.
Most classes prefixed with the Konstrukt keyword have had this prefix removed.
- Examples: IKonstruktRepository is now IRepository
- Exclusions: The root level KonstruktConfig and KonstruktConfigBuilder have a UIBuilder prefix instead, and the AddKonstrukt extension for IUmbracoBuilder has been replaced by AddUIBuilder

JavaScript changes

All Konstrukt controllers have changed namespace to Umbraco.UIBuilder.
All Konstrukt prefixed directives, services, and resources are now prefixed with uibuilder.

UI Changes

All static UI assets are served via a Razor Compiled Library (RCL) and are no longer found in the App_Plugins folder.
The folder with App_Plugins has been renamed from Konstrukt to UmbracoUIBuilder.

Step 1: Replace dependencies

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

Remove any installed Konstrukt packages:

dotnet remove package Konstrukt

Delete the Konstrukt App_Plugins folder:

rmdir App_Plugins\Konstrukt

Install Umbraco.UIBuilder:

dotnet add package Umbraco.UIBuilder

Compile your project against .NET 7.0.

Step 2: Update namespaces and entity names

Step 3: Update your configuration

builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .AddUIBuilder(cfg => {
        // The rest of your configuration
    })
    .Build();

Step 4: Finalizing the migration

Delete any obj/bin folders in your projects to ensure a clean build.
Recompile all projects and ensure all dependencies are restored correctly
Delete the existing Konstrukt license files in the umbraco\Licenses folder.
Add your new Umbraco.UIBuilder license key to the appSettings.json file:

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

Run the project.