Umbraco 11 + .NET 7 + React + Hooks Part 1
Tags: umbraco, dotnet, webdev, react
Published: 2023-04-03 12:10:43

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl7gwg9hwbkgo5uz8mlp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tevkneitgpcyxny4q8x9.png)
## 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"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0lkcxov3oka0h30lced.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/optx2719apdzua3rxye3.png)

- Click on Document Type with Template

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n107a6qy8pe7myunuba9.png)

-  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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnzgdi8iaqk5jnko34aa.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds8gxhhp1tah5myha01c.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptzzm56oe98lxwsgimjr.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzdadej3d2q5k9tb7sjo.png)



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pzsy2q61exx0kizuejn.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kty6x8fhx0u33kzo376q.png)

##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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0cje3y89g6kv45n6xel.png)


__update umbraco object in appsetting.json to be like this
```json
"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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yli4ymtkw5omijzt975a.png)

> 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jboril4gfs1f0rnph3q.png)

## navigate to Homepage.cshtml
and now you'll have code intellisense to Homepage model 




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf0ckyr61c9z3mhtrky5.png)



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuw32f3izc6uyos597h2.png)


##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