Contentment for Bellissima
Tags: umbraco, cms, dotnet, webcomponents
Published: 2023-11-30 12:59:06

## Preamble

This series is about the migration of my Umbraco package, Contentment, to the new Umbraco backoffice, codenamed Bellissima.

{% details If you don't know what any of that means, expand this section for background reading and lexicon for this series. %}

- [Contentment](https://marketplace.umbraco.com/package/umbraco.community.contentment) is the name of my Umbraco package, it contains a bunch of useful property-editors.

> If you want to see Contentment in action, I did a 30 minute presentation at CodeGarden 2023, [Finding Contentment](https://www.youtube.com/watch?v=fYPcFOxeN4c), exploring each of the editor components.

- [Bellissima](https://umbraco.com/blog/bellissima-preview-releases-of-the-new-backoffice/) is the project codename of the new backoffice for Umbraco CMS, (circa v14).

- Bellissima web tech... e.g. Web Components, TypeScript, Lit, Vite, see @mattbrailsford's series of articles [Back to the Front-end: Exploring the Future of the Umbraco UI](https://dev.to/mattbrailsford/series/20031).

{% enddetails %}

> _Disclaimer: I am part of the [Umbraco Backoffice Community Team](https://community.umbraco.com/learn-about-the-community/community-teams/the-backoffice-community-team/) - my opinions in these articles are my own and do not reflect the opinions of the community team nor Umbraco HQ._
> 
> _The detail in these articles tries to be as accurate as possible (at the time of writing), if reading this a year or two from now, I'd expect there to be many changes with how Umbraco extension development is approached._

---

## Where to begin?

At CodeGarden (June 2023), a preview of v14 was released, but wasn't quite ready for package development. By August 2023, [`14.0.0--preview002` was released](https://umbraco.com/blog/bellissima-preview-releases-of-the-new-backoffice/), including the Extension API, so package developers could register their extension points, e.g. dashboards, property-editors, etc. Meaning it was ready to explore.

My initial dilemma was should I attempt to make the existing Contentment codebase work with Bellissima, or start from scratch?

> _Note: I had a similar dilemma with [the Umbraco v9 / .NET Core migration work](https://github.com/leekelleher/umbraco-contentment/discussions/105). Ultimately, I started off from scratch, then did a complete U-turn and ended up with the .NET multi-targeting solution, supporting multiple versions of Umbraco in a single package. (Which has turned out quite well for Contentment.)_

My gut feeling was to keep the existing codebase as-is, making sure that the .NET assembly library has binary compatibility (e.g. the C# server-side bits), before thinking about the backoffice-frontend/web-component bits.

Umbraco v13 and v14 would be compiled against .NET 8.0, so I got the latest .NET 8 preview installed and configured Contentment's `.csproj` file to target `net8.0` and reference Umbraco's `14.0.0--preview002` NuGet packages.  As expected, this gave me a bunch of compiler errors from [breaking-changes in v13](https://our.umbraco.com/download/releases/1300)/v14 codebase.

Fixing up the breaking-changes was straight forward, nothing complicated, given my .NET multi-targeting approach, I could make use pre-processor directives for specific fixes, e.g. `#if NET8_0_OR_GREATER`. All time consuming, but no headaches.

## Versioning dilemmas

Once the compiler errors were resolved, I was able to run Contentment against an Umbraco instance of `14.0.0--preview002`. Of course, I wasn't able to do anything with it, there were no property-editors registered, but the initial hurdle was overcome.

Before I got going with the backoffice-frontend/web-components prototyping, I wondered about whether Contentment should take the RCL (Razor Class Library) approach. _Meaning that the `App_Plugins` folder would be served from the NuGet package itself, rather than copied over at build-time. (It's what all the cool kids are doing these days!)_

This presented another dilemma, RCL is a .NET Core technology, so this wouldn't work for legacy .NET Framework, meaning that I'd need to drop support for Umbraco v8. And whilst I was considering dropping support for old versions, I could drop Umbraco v9 too. I gave it all some thought and updated [Contentment's ROADMAP](https://github.com/leekelleher/umbraco-contentment/blob/master/.github/ROADMAP.md).

In terms of Contentment's version numbers, and expecting to add support for Umbraco v13/.NET 8, I could do a Contentment v5 to drop support for v8/v9, add v13 (LTS) and do the RCL. This would be paving the way for a Contentment v6 to add support for Bellissima, (although because of the .NET multi-targeting, it'd need to be the next .NET major, so .NET 9, which would be Umbraco v15). _(There's probably a lot to unpack in this paragraph, it'll make sense in a future article)._

I still haven't fully decided whether to continue with the .NET multi-targeting approach after Bellissima, I may change my mind, but I do like the idea of having a single NuGet package (and codebase) that could support multiple versions of Umbraco. It'd be interesting to explore.

## Next time...

Next time, I'll show my starting steps for the backoffice-frontend/web-components, installing TypeScript/Vite/Lit, et al.
In the meantime, if you want to skip ahead and see the code, here are links to areas of interest on Contentment's GitHub repository:

- [Support for Umbraco Bellissima, (aka new backoffice) #357](https://github.com/leekelleher/umbraco-contentment/discussions/357)
- [The work-in-progress branch `dev/wip/bellissima`](https://github.com/leekelleher/umbraco-contentment/tree/dev/wip/bellissima)