mcpField
U
umbraco-entry-point

umbraco-entry-point

github.com/umbracoDevelopment27389 installsUpdated 6w ago
Repository

About umbraco-entry-point

A skill for building Umbraco Backoffice Entry Points. It guides developers through checking current documentation, gathering initialization requirements, and generating the manifest and JavaScript entry point.

Key features

  1. 01Fetches current Umbraco documentation
  2. 02Clarifies initialization and cleanup needs
  3. 03Generates a manifest and entry point
  4. 04Explains testing steps

Use cases

  1. 01Initializing an Umbraco package after sign-in
  2. 02Loading external libraries or global CSS
  3. 03Registering UI extensions dynamically

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-entry-point

After installing, type/umbraco-entry-pointin Claude Code to confirm it loaded.

Details

From the project README

Umbraco Entry Point

What is it?

Entry Points are extensions that execute JavaScript code when the Umbraco backoffice starts up. The Backoffice Entry Point runs after user authentication and is used for initialization logic, loading external libraries, registering UI extensions dynamically, or including global CSS. An optional onUnload function handles cleanup.

Documentation

Always fetch the latest docs before implementing:

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What initialization is needed? Any external libraries? Cleanup required?
  3. Generate files - Create manifest + entry point based on latest docs
  4. Explain - Show what was created and how to test

Minimal Examples

Manifest (umbraco-package.json)
{
  "name": "My Package",
  "extensions": [
    {
      "type": "backofficeEntryPoint",
      "alias": "My.EntryPoint",
      "name": "My Entry Point",
      "js": "/App_Plugins/MyPackage/index.js"
    }
  ]
}
Implementation (index.ts)
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
  console.log('My package initialized');

  // Register extensions dynamically
  extensionRegistry.register({
    type: 'dashboard',
    alias: 'My.Dashboard',
    name: 'My Dashboard',
    element: () => import('./dashboard.js'),
    meta: {
      label: 'My Dashboard',
      pathname: 'my-dashboard'
    }
  });
};

// Optional cleanup
export const onUnload = () => {
  console.log('My package unloaded');
};

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.

Comments

Markdown supported