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
        }
      }
    }
  },

__ backoffice models builder after updating the appsetting.json

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

navigate to Homepage.cshtml

and now you'll have code intellisense to Homepage model

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

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

stay tuned
Socials:

LinkedIn: https://www.linkedin.com/in/mohammedzaky
GitHub: https://github.com/mozaky