Loading...
Loading...
Create new Umbraco backoffice extensions using the official dotnet template
npx skill4agent add umbraco/umbraco-cms-backoffice-skills umbraco-extension-templatedotnet new install Umbraco.Templatesdotnet new umbraco-extension -n MyExtensioncd MyExtension/Client && npm installnpm run watchnpm run builddotnet new install Umbraco.Templatesdotnet new umbraco-extension -n MyExtensiondotnet new umbraco-extension -n MyExtension -ex-exMyExtension/
├── MyExtension.csproj # .NET project file
├── Constants.cs # Extension constants
├── README.md # Setup instructions
└── Client/ # TypeScript source
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
└── ... # Your extension codeMyExtension/
├── MyExtension.csproj
├── Constants.cs
├── README.md
├── Composers/ # C# composers
│ └── SwaggerComposer.cs # API documentation setup
├── Controllers/ # C# API controllers
│ └── MyExtensionController.cs
└── Client/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
├── api/ # Generated API client
├── dashboards/ # Example dashboard
└── entrypoints/ # Extension entry point# Navigate to Client folder
cd MyExtension/Client
# Install dependencies
npm install
# Development with hot reload
npm run watch
# Production build
npm run build
# Type checking
npm run checkdotnet publish --configuration Releasedotnet pack --configuration ReleaseClient/src/export const manifests: Array<UmbExtensionManifest> = [
{
name: "My Extension Entrypoint",
alias: "MyExtension.Entrypoint",
type: "backofficeEntryPoint",
js: () => import("./entrypoint.js"),
},
];import type { UmbEntryPointOnInit } from "@umbraco-cms/backoffice/extension-api";
export const onInit: UmbEntryPointOnInit = (_host, _extensionRegistry) => {
console.log("Extension loaded!");
};umbraco-add-extension-reference.csproj<ProjectReference>Umbraco-CMS.Skills.csprojumbraco-sectionsumbraco-dashboardumbraco-menuumbraco-workspaceumbraco-treeumbraco-backoffice