Umbraco 11 + .NET 7 + React + Hooks Part 1

#umbraco #dotnet #webdev #react

Building a content management system (CMS) can be a daunting task, but with the right tools and frameworks, it can be an incredibly rewarding experience. Enter Umbraco, the flexible and customizable CMS that provides a strong foundation for building powerful web applications. With Umbraco, you have the freedom to use any frontend framework or tool you prefer, so you can build your frontend using trendy libraries like React and modern build tools like Vite.

When it comes to building the frontend of your CMS, using a single-page application (SPA) architecture with React provides a smoother and more responsive user experience. React's reusable component system makes it easy to build and maintain complex applications, while Vite's rapid iteration and hot module replacement features make development faster and more efficient.

By combining the power of Umbraco, React, and Vite, you can create a highly customized and performant CMS that delivers a seamless user experience. With these tools, building a CMS has never been easier or more enjoyable. So why wait? Start building your dream CMS today!

this part will cover how configure umbraco 11 and make content properties strongly typed and bind in CSHTML

lets get started first with installing umbraco

Create an Umbraco project using CLI

open the terminal and enter below commands

Ensure we have the latest Umbraco templates

dotnet new -i Umbraco.Templates

Create solution/project

dotnet new sln --name "MyCustomUmbracoProject" dotnet new umbraco --force -n "MyCustomUmbracoProject" --friendly-name "Administrator" --email "admin@example.com" --password "1234567890" --development-database-type SQLite dotnet sln add "MyCustomUmbracoProject" dotnet run --project "MyCustomUmbracoProject"

output so far

so next steps we need is, override umbraco route

from backoffice we will create content type with template it will be the root page and it lets call it Homepage

based on the output from dotnet run check localhost:port

Navigate to https://localhost:44398/umbraco#/content
Click "Settings"

Click "Document Types" and ... (actions)

Click on Document Type with Template

Type Homepage and select Home icon with any color of you choice because this will be our main root node in Content Tab then click on Permission button and toggle allow as root as below

Click back on design button then add group and name it Content, then click on add property

enter property name as **title **and select editor, then select text string

Click on green Submit/Save button (bottom right) to close modal and another save button to save newly created content

Navigate back to Content Tab as below and create Homepage Node

Enter title as Home or Homepage, then add to title property any value you wish, then click on save and publish

so far we only created a template and content without binding this content to the template; this will be done in react UI through an API call, we will cover this next. but before we do this, we need to make the content as strongly typed, now navigate to the project in VSCode

*we will update dotnet appsettings.json file to make it generate models every time we update it from backoffice in umbraco *

backoffice models builder before updating appsetting.json

__update umbraco object in appsetting.json to be like this

"Umbraco": {
    "CMS": {
      "Runtime": { "Mode": "BackofficeDevelopment" }, 
      "ModelsBuilder": { "ModelsMode": "SourceCodeAuto" },
      "Global": {
        "Id": "70c7839b-e20a-4c6f-a54c-821b4edb2ffb",
        "SanitizeTinyMce": true
      },
      "Content": {
        "AllowEditInvariantFromNonDefault": true,
        "ContentVersionCleanupPolicy": {
          "EnableCleanup": true
        }
      }
    }
  },