DEV Community

Cover image for Umbraco 11 + .NET 7 + React + Hooks Part 1
Mohammed Zaki
Mohammed Zaki

Posted on • Updated on

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

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 "" --password "1234567890" --development-database-type SQLite
dotnet sln add "MyCustomUmbracoProject"
dotnet run --project "MyCustomUmbracoProject"

output so far

Image description

Image description

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

Image description

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

Image description

  • Click on Document Type with Template

Image description

  • 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

Image description

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

Image description

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

Image description

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

Image description

  • Navigate back to Content Tab as below and create Homepage Node

Image description

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

Image description

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

Image description

__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
Enter fullscreen mode Exit fullscreen mode

__ backoffice models builder after updating the appsetting.json

Image description

open VSCode, it will display new folder under umbraco folder named models, and it will contain the homepage model plus other umbraco common models

Image description

navigate to Homepage.cshtml

and now you'll have code intellisense to Homepage model

Image description

re-run the project via CLI, and navigate to https://localhost:44398/ and this will be the output

Image description

next part will cover how to integrate react and create react hooks into umbraco and debug our code from vscode

stay tuned


Top comments (2)

sanbartels profile image
Daniel Santiago • Edited

I like. Greetings from Colombia.

mozaky profile image
Mohammed Zaki