> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/backoffice-entry-point.md).

# Backoffice Entry Point

The Backoffice Entry Point extension type is used to run some JavaScript code at startup.

This manifest declares a single JavaScript file that will be loaded and run when the Backoffice starts. In other words, this can be used as an entry point for a package.

{% hint style="info" %}
See [App Entry Point](/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/app-entry-point.md) if you are looking for an Extension that runs before the user is logged in. See [User Entry Point](/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/user-entry-point.md) if your code depends on the signed-in user, or must run again each time a user signs in.
{% endhint %}

The `backofficeEntryPoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `backofficeEntryPoint` to load the external libraries to be shared by all your extensions. Additionally, **global CSS files** can also be used in the `backofficeEntryPoint` extension.

**Register a Backoffice Entry Point in the `umbraco-package.json` manifest**

{% code title="umbraco-package.json" %}

```json
{
    "name": "Name of your package",
    "alias": "My.Package",
    "extensions": [
        {
         "type": "backofficeEntryPoint",
         "alias": "My.EntryPoint",
         "js": "/App_Plugins/YourFolder/index.js"
        }
    ]
}
```

{% endcode %}

**Base structure of the entry point file**

{% hint style="info" %}
All examples are in TypeScript, but you can use JavaScript as well. Make sure to use a bundler such as [Vite](/umbraco-cms/extend-your-project/backoffice-extensions/development-flow/vite-package-setup.md) to compile your TypeScript to JavaScript.
{% endhint %}

{% code title="index.ts" %}

```typescript
import type { UmbEntryPointOnInit, UmbEntryPointOnUnload } from '@umbraco-cms/backoffice/extension-api';

/**
 * Perform any initialization logic when the Backoffice starts
 */
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
    // Your initialization logic here
}

/**
 * Perform any cleanup logic when the Backoffice and/or the package is unloaded
 */
export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => {
    // Your cleanup logic here
}
```

{% endcode %}

{% hint style="info" %}
The `onUnload` function is optional and can be used to perform cleanup logic when the Backoffice and/or the package is unloaded.
{% endhint %}

## Examples

### Register additional UI extensions in the entry point file

{% code title="index.ts" %}

```typescript
import type { UmbEntryPointOnInit, UmbEntryPointOnUnload } from '@umbraco-cms/backoffice/extension-api';

const manifest: UmbExtensionManifest = {
    type: '', // type of extension
    alias: '', // unique alias for the extension
    name: '', // human-readable name of the extension
    elementName: '', // unique name of the custom element
    js: '', // path to the javascript resource
    meta: {
        // additional props for the extension type
    }
};

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
    // Register the extension
    extensionRegistry.register(manifest);
}

export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => {
    // Unregister the extension (optional)
    extensionRegistry.unregister(manifest.alias);
}
```

{% endcode %}

{% hint style="info" %}
If you only need to register extensions, then consider using a [bundle](/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/bundle.md) type instead.
{% endhint %}

### Register global CSS

An entry point is a good place to load global CSS files for the whole application. You can do this by creating a link element and appending it to the head of the document:

{% code title="index.ts" %}

```typescript
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => {
    const css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = '/App_Plugins/YourFolder/global.css';
    document.head.appendChild(css);
}
```

{% endcode %}

Alternatively, you can import the CSS file directly into your JavaScript file:

{% code title="index.ts" %}

```typescript
import '/App_Plugins/YourFolder/global.css';
```

{% endcode %}

## Type IntelliSense

It is recommended to make use of the Type intellisense that we provide.

When writing your Manifest in TypeScript, you should use the `UmbExtensionManifest` type. Read the [TypeScript setup](/umbraco-cms/extend-your-project/backoffice-extensions/development-flow.md#typescript-setup) article to make sure you have Types correctly configured.

{% code title="index.ts" %}

```typescript
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';

const manifests: Array<UmbExtensionManifest> = [
    {
        type: '...',
        alias: 'my.customization',
        name: 'My customization'
        ...
    },
    ...
];

export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
    // Register the extensions
    extensionRegistry.registerMany(manifests);
}
```

{% endcode %}

## What's next?

See the Extension Types article for more information about all the different extension types available in Umbraco:

{% content-ref url="/pages/mRvTEWFbgfxH3faGurnh" %}
[Extension Types](/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types.md)
{% endcontent-ref %}

Read about running code before logging in using an `appEntryPoint`:

{% content-ref url="/pages/MD81p9VhfiZJr1PjLqND" %}
[App Entry Point](/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/app-entry-point.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/backoffice-entry-point.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.