Forem: Mohammed Zaki

[Boost]

Mohammed Zaki — Thu, 25 Sep 2025 10:17:09 +0000

Either You Die a Developer, or Live Long Enough to See Yourself Become a Product Manager

Sarthak Sharma ・ Sep 24

#webdev #ai #career #discuss

Umbraco 11 + .NET 7 + React + Vite + Hooks Part 3

Mohammed Zaki — Sat, 08 Apr 2023 12:06:57 +0000

in this article we will do the following

update homepage content in umbraco and add new property
create a service and interface to return data from umbraco and add it to DI
create a controller to use that service
create custom hook to fetch data from umbraco API

Updating our current homepage

navigate to /umbraco and login to dashboard
click on settings/document types > homepage
click on add property > enter name as image, then click on select editor and select image cropper

click on save to save the changes
then click on settings (check image below) and select models builder to update homepage model so we can use it our service

then click on Content, update the content and click Save and publish

current folder structure without ClientApp,



├├─> MyCustomUmbracoProject
 │ ├─> .vscode
 │  │ ├─> launch.json
 │  │ ├─> tasks.json
 │ ├─> appsettings.json
 │ ├─> ClientApp //to be covered in bit
 │ ├─> Controllers
 │  │ ├─> HomeController.cs
 │  │ ├─> ContentController.cs
 │ ├─> Interfaces
 │  ├─> IContentService.cs
 │ ├─> Models
 │  │ ├─> GenericResult.cs
 │  │ ├─> HomepageDTO.cs
 │ ├─> Services
 │  ├─> ContentService.cs
 │ ├─> umbraco
 │  ├─> models
 │    │ ├─> Homepage.generated.cs

add Interfaces, Services Folder and create the following

under Models add 2 classes HomepageDTO, GenericResult ```cs

namespace MyCustomUmbracoProject.Models
{
public class GenericResult
{
public T Data { get; set; }
public bool Success { get; set; }
public string Message { get; set; } = null;
public string Error { get; set; } = null;
public IEnumerable ErrorMessages { get; set; } = Enumerable.Empty();
}

}


```cs


namespace MyCustomUmbracoProject.Models
{
    public class HomepageDTO
    {
        public string? Title { get; set; }
        public string? ImageUrl { get; set; }
    }
}

create a interface named IContentService ```cs

using MyCustomUmbracoProject.Models;

namespace MyCustomUmbracoProject.Interfaces
{
public interface IContentService
{
GenericResult GetHomeContent();

}



- create a Service named ContentService
```cs



using MyCustomUmbracoProject.Interfaces;
using MyCustomUmbracoProject.Models;
using Umbraco.Cms.Web.Common;
using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;

namespace MyCustomUmbracoProject.Services
{
    public class ContentService : IContentService
    {
        private UmbracoHelper _umbracoHelper;
        private readonly ILogger<ContentService> _logger;

        public ContentService(ILogger<ContentService> logger, UmbracoHelper umbracoHelper)
        {
            _logger = logger;
            _umbracoHelper = umbracoHelper;

        }

        public GenericResult<HomepageDTO> GetHomeContent()
        {
            GenericResult<HomepageDTO> result = new GenericResult<HomepageDTO>();
            try
            {
                var model = this._umbracoHelper?.ContentAtRoot()?.DescendantsOrSelf<ContentModels.Homepage>().FirstOrDefault() ?? null;
                result.Data = new HomepageDTO()
                {
                    Title = model?.Title ?? "",
                    ImageUrl = model?.Image?.Src ?? ""
                };
                result.Success = true;
                result.Message = "Content Fetched Successfully";
            }
            catch (System.Exception ex)
            {
                result.Success = false;
                result.Message = "Something went wrong";

                result.Error = ex.Message;
                this._logger.LogError(ex, "error while getting data for HomeContent");
            }
            return result;
        }
    }
}

inject the service and interface in DI in Startup.cs



 public void ConfigureServices(IServiceCollection services)
        {
           //Rest of code
            services.AddScoped<IContentService, ContentService>();
        }

create controller named Content Controller and inject content service into constructor



using Microsoft.AspNetCore.Mvc;
using MyCustomUmbracoProject.Models;
using MyCustomUmbracoProject.Interfaces;

namespace MyCustomUmbracoProject
{
    [Route("api/[controller]")]
    public class ContentController : ControllerBase
    {
        private IContentService _contentService;

        public ContentController(IContentService contentService)
        {
            _contentService = contentService;
        }

        [HttpGet]
        [Route("home-content")]
        public ActionResult<HomepageDTO> FetchHomeContent()
        {
            var result = this._contentService.GetHomeContent();

            return Ok(result);
        }
    }

}

now for the ClientApp



├─> MyCustomUmbracoProject
 │ ├─> ClientApp
 │  │ ├─> src
 │  │  │ ├─> components
 │  │  │  ├─> Spinner.tsx
 │  │  │ ├─> hooks
 │  │  │  ├─> use-fetch.ts
 │  │  │ ├─> models
 │  │  │  │─> generic-result.ts
 │  │  │  ├─> home-page.ts

create use-fetch.ts hook into hooks folder



import { useCallback, useEffect, useReducer, useRef } from 'react'

interface State<T> {
    response?: T
    error?: Error
    loading: boolean;
    runQuery: (params?: Record<string, any>) => void;
}
interface FetchOptions<T> {
    url?: string;
    options?: RequestInit;
    runOnFirstRender?: boolean;
}

type Cache<T> = { [url: string]: T }

// discriminated union type
type Action<T> =
    | { type: 'loading' }
    | { type: 'fetched'; payload: T }
    | { type: 'error'; payload: Error }

const useFetch = <T = unknown>({ url, options, runOnFirstRender = true }: FetchOptions<T>): State<T> => {
    const cache = useRef<Cache<T>>({})

    // Used to prevent state update if the component is unmounted
    const cancelRequest = useRef<boolean>(false)

    const initialState: State<T> = {
        error: undefined,
        response: undefined,
        loading: false,
        runQuery: () => (params?: Record<string, any> | undefined): void => {

        }
    }

    // Keep state logic separated
    const fetchReducer = (state: State<T>, action: Action<T>): State<T> => {
        switch (action.type) {
            case 'loading':
                return { ...initialState, loading: true }
            case 'fetched':
                return { ...initialState, response: action.payload, loading: false }
            case 'error':
                return { ...initialState, error: action.payload, loading: false }
            default:
                return state
        }
    }

    const [state, dispatch] = useReducer(fetchReducer, initialState)
    const runQuery = useCallback((params?: Record<string, any>) => {
        if (url) {
            fetchData(url, params)
        }

    }, [url])
    const fetchData = async (url: string, params?: Record<string, any>) => {
        dispatch({ type: 'loading' })

        // If a cache exists for this url, return it
        if (cache.current[url]) {
            dispatch({ type: 'fetched', payload: cache.current[url] })
            return
        }

        try {
            const response = await fetch(url, options)
            if (!response.ok) {
                throw new Error(response.statusText ? response.statusText : response.status.toString())
            }

            const data = (await response.json()) as T
            cache.current[url] = data
            if (cancelRequest.current) return

            dispatch({ type: 'fetched', payload: data })
        } catch (error) {
            if (cancelRequest.current) return

            dispatch({ type: 'error', payload: error as Error })
        }
    }


    useEffect(() => {
        // Do nothing if the url is not given
        if (!url) return

        cancelRequest.current = false


        if (runOnFirstRender) fetchData(url, options)
        // Use the cleanup function for avoiding a possibly...
        // ...state update after the component was unmounted
        return () => {
            cancelRequest.current = true
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [url, runOnFirstRender])

    return { response: state.response, loading: state.loading, error: state.error, runQuery: runQuery }
}

export default useFetch

-update App.tsx



import { Route, HashRouter as Router, Routes } from "react-router-dom";
import "./App.css";
import reactLogo from "./assets/react.svg";
import viteLogo from "./assets/vite.png";
import { About } from "./pages/About";
import { ContactUs } from "./pages/Contact";
import { Home } from "./pages/Home";
import { NotFound } from "./pages/NotFound";

export const App = () => {
  return (
    <>
      <nav>
        <h2 className="title">Vite + React + Umbraco</h2>
        <ul>
          <li>
            <a href="/">Home </a>
          </li>
          <li>
            <a href="#/about">About</a>
          </li>
          <li>
            <a href="#/contact">Contact</a>
          </li>
        </ul>

      </nav>
      <div className="App">
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img
              src="https://user-images.githubusercontent.com/6791648/60256231-6e710c00-98d1-11e9-8120-06eecbdb858e.png"
              className="umbraco logo"
              alt="umbraco logo"
            />
          </a>
        </div>
        <Router>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<ContactUs />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
        <div className="card"></div>
      </div>
    </>
  );
};

update app.css



* {
  padding: 0;
  margin: 0;
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.error {
  color: red;
}

/* nav start */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #cfd8dc;
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  padding-left: 1rem;
}

nav a {
  text-decoration: none;
  color: #0d47a1;
}

/* 
  Extra small devices (phones, 600px and down) 
*/
@media only screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding-top: 0.5rem;
  }
  nav li {
    padding: 0.5rem 0;
  }
}

.title {
  color: #242424;
}

/* To center the spinner*/
.pos-center {
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

-update Home.tsx



import useFetch from "../hooks/use-fetch";

import { HomePage } from "../models/home-page";

import { GenericResult } from "../models/generic-result";

import Spinner from "../components/Spinner";

export const Home = () => {

  const {

    response: { data, success, error: errorMsg } = {

      data: undefined,

      success: false,

      error: undefined,

    },

    error,

    loading,

  } = useFetch<GenericResult<HomePage>>({ url: "api/content/home-content" });

return (

    <>

      <Spinner loading={loading} />

      {error && <p className="error">error ...{error?.message}</p>}

      {!loading && !success && <p className="error">error ...{errorMsg}</p>}

      {success && data && (

        <div>

          title : {data.title}

          <div>

            {data.imageUrl && (

              <img

                title={data.title}

                src={</span><span class="p">${</span><span class="nx">data</span><span class="p">.</span><span class="nx">imageUrl</span><span class="p">}</span><span class="s2">}

                width="auto"

                height="200px"

              />

            )}

          </div>

        </div>

      )}

    </>

  );

};

Final Output

let me know if you're interested in content like,

if would like to continue this series also let me know..

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

Umbraco 11 + .NET 7 + React + Vite + Hooks Part 2

Mohammed Zaki — Tue, 04 Apr 2023 21:38:07 +0000

Last article we discussed how to create empty umbraco site with strongly typed model, if you didnt read it, please read here it because will continue from we left it off

Create React App No Longer the Standard

React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to this pull request on Github, create-react-app is finally gone.

first lets create react app using vite
within project folder
open the terminal and type this command
npm create vite@latest ClientApp --template react
update package.json to be like this



{
  "name": "clientapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "start-dev": "tsc && vite build --emptyOutDir --mode development --watch",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0"
  },
  "devDependencies": {
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

run npm install to install packages

then update vite.config.ts




/// <reference types="node" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

const root = path.join(__dirname, './');
const main = path.resolve(__dirname, 'src', 'main.tsx');

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => ({
  plugins: [react()],
  publicDir: command === 'build' ? false : 'src/assets',
   root: root,
  resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts'],
  },
  server: {
    port: 3000
  },

  build: {
    outDir: './dist/umbraco-app',
    minify: mode === 'development' ? false : 'terser',
    brotliSize: false,
    manifest: false,
    sourcemap: command === 'serve' ? 'inline' : false,
    rollupOptions: {
      input: {
        main: main
      },
      output: {
        assetFileNames: 'assets/[name][extname]',
        chunkFileNames: 'chunks/[name].[hash].js',
        entryFileNames: 'js/[name].js',
      },
    },
  },

}));

create pages folder and within this folder add 4 pages
Home.tsx
About.tsx.
Contact.tsx
NotFound.tsx ## Home Component Syntax ```jsx

export const Home = () => {
return (
<>

Home Works

</>
);
};

- update content of App.tsx
```jsx



import reactLogo from "./assets/react.svg";
import viteLogo from "./assets/vite.png";
import { HashRouter as Router, Routes, Route, Link } from "react-router-dom";
// we're using Hash Router to override umbraco routing when  page is refreshed 
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { ContactUs } from "./pages/Contact";
import { NotFound } from "./pages/NotFound";
import "./App.css"; 
export const App = () => {
    return (
      <div className="App">
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
          <a href="https://reactjs.org" target="_blank">
            <img
              src="https://user-images.githubusercontent.com/6791648/60256231-6e710c00-98d1-11e9-8120-06eecbdb858e.png"
              className="umbraco logo"
              alt="umbraco logo"
            />
          </a>
        </div>
        <h1>Vite + React + Umbraco</h1>
        <Router>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About </Link>
              </li>
              <li>
                <Link to="/contact">Contact </Link>
              </li>
            </ul>
          </nav>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<ContactUs />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Router>
        <div className="card"></div>
      </div>
    );
};

export default App;

run the app npm run start-dev

so far we only created SPA in vite, to integrate with umbraco please follow thse steps

open VScode and install this nuget package

dotnet add package Microsoft.AspNetCore.SpaServices.Extensions
edit startup class ConfigureServices function



   public void ConfigureServices(IServiceCollection services)
        {
            services.AddUmbraco(_env, _config)
                .AddBackOffice()
                .AddWebsite()
                .AddComposers()
                .Build();
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist/umbraco-app";
            });
        }

update configure function



 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseRouting();

            app.UseUmbraco()
                .WithMiddleware(u =>
                {
                    u.UseBackOffice();
                    u.UseWebsite();
                })
                .WithEndpoints(u =>
                {
                    u.UseInstallerEndpoints();
                    u.UseBackOfficeEndpoints();
                    u.UseWebsiteEndpoints();
                });
            app.UseDefaultFiles();
            app.UseStaticFiles(new StaticFileOptions
            {

                FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(
                               Path.Combine(env.ContentRootPath, "ClientApp/dist/umbraco-app")),
                RequestPath = "",
                OnPrepareResponse = ctx =>
                {
                    // Set cache control header to allow caching of static files
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=31536000,immutable");
                }
            });
            app.UseEndpoints(endpoints =>
           {
               endpoints.MapControllers();

               endpoints.MapControllerRoute(
               name: "Default",
               pattern: "",
               defaults: new { controller = "Home", action = "Index" });
 endpoints.MapFallbackToController("Index", "Home");
           });


            app.UseSpa(spa =>
            {

                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment())
                {

                    spa.UseReactDevelopmentServer(npmScript: "start-dev");
                }

            });

        }

Now we need to tell VS Code how to run your project.
Open the command palette, you can use the shortcut Ctrl+Shift+P, and type in Tasks: Configure and select the Tasks: Configure Task option:

Select "Create task.json from template"

Now select ".NET Core" as your template.

After this VS Code will have created a folder called .vscode that contains a file called tasks.json, it's this file that tells VS Code how to build your project.
Now that we've told VS Code how to build your project, we need to tell it how to launch it. VS Code can do this for you. First, select the little play button in the left side menu, and then select the "create a launch.json file" link.

This will prompt a menu to appear, select: .Net Core

and that's it, you should find this output

next article i'll cover how consume content from umbraco through API's and render it home page using custom fetch hook in typescript

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

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

Mohammed Zaki — Mon, 03 Apr 2023 12:10:43 +0000

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