Uncategorized

Umbraco 15: Elevating Headless and Composable CMS Development with .NET 8

vijay k

Umbraco 15, released in 2024, marks a significant evolution in the open-source CMS space. Built on ASP.NET Core 8, it strengthens Umbraco’s position as a powerful, developer-friendly platform for headless CMS, composable digital experience platforms (DXPs), and modern web applications. With improvements in API-first architecture, editor experience, and plugin modularity, Umbraco 15 offers speed, scalability, and flexibility across enterprise and developer use cases.

🔍 What is Umbraco 15?

Umbraco 15 is a modern, cross-platform .NET 8-based open-source CMS that enables developers to build content-rich websites, APIs, and digital experiences with ease. As a short-term supported (STS) version, it includes bleeding-edge updates from the Umbraco ecosystem.

Key enhancements in Umbraco 15:

  • Native support for .NET 8
  • Enhanced Delivery API with query support and filters
  • Faster build and deployment with improved Dependency Injection (DI) handling
  • Streamlined block grid editor
  • Better multi-environment configurations via appsettings
  • Performance upgrades in rendering and indexing

💼 Major Use Cases of Umbraco 15

1. Headless CMS for Web & Mobile

Serve structured content to any frontend (React, Angular, Flutter) using the improved Delivery API.

2. Composable Digital Experience Platforms

Integrate with CRM, analytics, e-commerce (like Vendr or Ucommerce), and personalization engines.

3. Multisite and Multilingual Platforms

Host and manage multiple brand sites or language versions with shared content and user roles.

4. Custom .NET Applications with CMS

Extend Umbraco into custom business apps using C#, Razor Pages, or Web APIs with full control.

5. API-Driven Portals

Build customer-facing portals or employee dashboards that consume Umbraco content via JSON.

6. Marketing Websites

Empower content editors with block-based editing, media handling, and publishing workflows.

🏗 How Umbraco 15 Works (Architecture Overview)

Umbraco 15 maintains a clean, modular architecture based on ASP.NET Core 8, with improvements in editor performance, headless capabilities, and integration flexibility.

🧩 Key Architecture Components

ComponentDescription
BackofficeAngular-based admin panel for managing content, media, and settings
Delivery APIRESTful endpoint for retrieving published content in JSON
Block Grid EditorVisual editing tool for drag-and-drop content blocks
Dependency InjectionASP.NET Core-native DI for controllers, services, and middleware
Indexing & CachingFast internal indexing (Examine) and caching for efficient content delivery
Config SystemUses appsettings.json for environment-specific settings and secrets
Plugin SystemCustom extensions, packages, and integrations via NuGet or manual install

With headless-first architecture, Umbraco 15 allows decoupling the backend CMS from frontend consumers using standardized and secure APIs.

🔄 Basic Workflow of Umbraco 15

👨‍💻 Developer Workflow:

  1. Install via CLI or Visual Studio
  2. Configure Document Types and Templates
  3. Build Views or APIs (optional)
  4. Push to Git and deploy via CI/CD or Docker
  5. Connect frontend via Delivery API

👩‍💼 Editor Workflow:

  1. Log into the Backoffice
  2. Create or edit content using block grid editor
  3. Upload media and define page structure
  4. Preview and schedule publishing
  5. Manage multilingual content and workflows

🚀 Step-by-Step Getting Started Guide for Umbraco 15

✅ Step 1: Prerequisites

  • .NET 8 SDK
  • Visual Studio 2022+ or VS Code
  • SQL Server (or SQLite for dev)
  • Node.js (optional for frontend asset handling)

🛠️ Step 2: Install Umbraco 15 via CLI

dotnet new -i Umbraco.Templates::15.0.0
dotnet new umbraco -n MyUmbracoSite --friendly-name "Admin" --email "admin@example.com" --password "SecureP@ss123"
cd MyUmbracoSite
dotnet run

Access Backoffice at: https://localhost:5001/umbraco

🧱 Step 3: Create a Document Type

  1. Navigate to Settings → Document Types
  2. Add new type (e.g., “Article”)
  3. Add fields: Title, Body Text, Image, Category
  4. Create a Template for rendering content

📄 Step 4: Add and Publish Content

  1. Go to Content → Home
  2. Create child nodes (e.g., Blog Posts)
  3. Fill content, preview changes
  4. Click Publish to go live

🌐 Step 5: Enable and Use Delivery API

  1. In Backoffice, go to Settings → API Settings
  2. Enable the Delivery API

Sample API call:

GET /umbraco/delivery/api/v1/content/home

The response will be in JSON:

{
  "id": "1234",
  "contentType": "home",
  "properties": {
    "title": "Welcome to Umbraco 15",
    "bodyText": "This is your first headless page."
  }
}

🐳 Step 6: Deploy with Docker (Optional)

Create a simple Dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:8.0
WORKDIR /app
COPY . .
ENTRYPOINT ["dotnet", "MyUmbracoSite.dll"]

Then:

docker build -t umbraco15-app .
docker run -p 8080:80 umbraco15-app

Related Posts