diff --git a/15/umbraco-cms/SUMMARY.md b/15/umbraco-cms/SUMMARY.md
index f9c01e68c7f..51e57014308 100644
--- a/15/umbraco-cms/SUMMARY.md
+++ b/15/umbraco-cms/SUMMARY.md
@@ -174,6 +174,7 @@
* [Block Custom View](customizing/extending-overview/extension-types/block-custom-view.md)
* [Bundle](customizing/extending-overview/extension-types/bundle.md)
* [Kind](customizing/extending-overview/extension-types/kind.md)
+ * [App Entry Point](customizing/extending-overview/extension-types/app-entry-point.md)
* [Backoffice Entry Point](customizing/extending-overview/extension-types/backoffice-entry-point.md)
* [Extension Conditions](customizing/extending-overview/extension-types/condition.md)
* [Dashboards](customizing/extending-overview/extension-types/dashboard.md)
diff --git a/15/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest.md b/15/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest.md
index b5da3d41afa..f5ccb40a799 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest.md
@@ -80,22 +80,26 @@ Read more about the `backofficeEntryPoint` extension type in the [Entry Point](e
Similar as `appEntryPoint` this runs as startup, the difference is that this runs before the user is logged in. Use this to initiate things before the user is logged in or to provide things for the Login screen.
+Read more about the `appEntryPoint` extension type in the [App Entry Point](../extension-types/app-entry-point.md) article.
+
## Type intellisense
It is recommend to make use of the Type intellisense that we provide.
When writing your Manifest in TypeScript you should use the Type `UmbExtensionManifest`, see the [TypeScript setup](../../development-flow/typescript-setup.md) article to make sure you have Types correctly configured.
-export const manifests: Array<UmbExtensionManifest> = [
- {
- type: '...',
+{% code title="manifests.ts" %}
+```typescript
+export const manifests: Array = [
+ {
+ type: '...',
alias: 'my.customization',
name: 'My customization'
...
- },
- ...
-];
-
+ }
+]
+```
+{% endcode %}
When writing the Umbraco Package Manifest you can use the JSON Schema located in the root of your Umbraco project called `umbraco-package-schema.json`
diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/README.md b/15/umbraco-cms/customizing/extending-overview/extension-types/README.md
index 86aa5e98fb7..f28761f0b51 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/README.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/README.md
@@ -18,9 +18,9 @@ The system provides Extension Types for certain needs and then there is a few th
The `bundle` type enables you to gather many extension manifests into one. These will be registered at startup.
-### [Entry Point](backoffice-entry-point.md)
+### [Backoffice Entry Point](backoffice-entry-point.md)
-The `Entry Point` type is used to execute the method of a JavaScript file when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup.
+The `backofficeEntryPoint` type is used to execute the method of a JavaScript file when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup.
### [Extension Conditions](condition.md)
diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/app-entry-point.md b/15/umbraco-cms/customizing/extending-overview/extension-types/app-entry-point.md
index e69de29bb2d..d2f647283b6 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/app-entry-point.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/app-entry-point.md
@@ -0,0 +1,13 @@
+---
+description: The App Entry Point extension type is used to run some JavaScript code before the user is logged in.
+---
+
+# App Entry Point
+
+This manifest declares a single JavaScript file that will be loaded and run when the Backoffice starts. Additionally, the code will also run on the login screen.
+
+It performs the same function as the `backofficeEntryPoint` extension type, but the difference is that this runs before the user is logged in. Use this to initiate things before the user is logged in or to provide things for the Login screen.
+
+Read more about `backofficeEntryPoint` to learn how to use it:
+
+{% content-ref url="./backoffice-entry-point.md" %} . {% endcontent-ref %}
diff --git a/15/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md b/15/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md
index f809377673b..81dfa73e2fb 100644
--- a/15/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md
+++ b/15/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md
@@ -1,21 +1,24 @@
-# Entry Point
+---
+description: The Backoffice Entry Point extension type is used to run some JavaScript code at startup.
+---
-{% hint style="warning" %}
-This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
-{% endhint %}
+# Backoffice Entry Point
-The `backofficeEntryPoint` extension type can be used to run some JavaScript code at startup.\
-The entry point 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.
+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.
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 in the external libraries to be shared by all your extensions. Additionally, **global CSS files** can also be used in the `backofficeEntryPoint` extension.
-The Entry Point manifest type is used to register an entry point for the backoffice. An entry point is a single JavaScript file that is loaded when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup.
+{% hint style="info" %}
+See also the [App Entry Point](./app-entry-point.md) article for a similar extension type that runs before the user is logged in.
+{% endhint %}
-**Register an entry point in the `umbraco-package.json` manifest**
+**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",
@@ -25,23 +28,134 @@ The Entry Point manifest type is used to register an entry point for the backoff
]
}
```
+{% endcode %}
+
+**Base structure of the entry point file**
-**Register additional UI extensions in 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](../../development-flow/vite-package-setup.md) to compile your TypeScript to JavaScript.
+{% endhint %}
+{% code title="index.ts" %}
```typescript
-import { extensionRegistry } from "@umbraco-cms/extension-registry"
+import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
+
+/**
+ * Perform any initialization logic when the Backoffice starts
+ */
+export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => {
+ // Your initialization logic here
+}
+
+/**
+ * Perform any cleanup logic when the Backoffice and/or the package is unloaded
+ */
+export const onUnload: UmbEntryPointOnUnload = (host, extensionsRegistry) => {
+ // 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
-const manifest = {
- {
+### Register additional UI extensions in the entry point file
+
+{% code title="index.ts" %}
+```typescript
+import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
+
+const manifest: UmbExtensionManifest = {
type: '', // type of extension
alias: '', // unique alias for the extension
elementName: '', // unique name of the custom element
js: '', // path to the javascript resource
meta: {
- // additional props for the extension type
+ // additional props for the extension type
}
- }
};
-extensionRegistry.register(extension);
+export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => {
+ // Register the extension
+ extensionRegistry.register(manifest);
+}
+
+export const onUnload: UmbEntryPointOnUnload = (host, extensionsRegistry) => {
+ // Unregister the extension (optional)
+ extension.unregister(manifest);
+}
```
+{% endcode %}
+
+{% hint style="info" %}
+If you only need to register extensions, then consider using a [bundle](./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 in 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 Type `UmbExtensionManifest`, see the [TypeScript setup](../../development-flow/typescript-setup.md) 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 = [
+ {
+ type: '...',
+ alias: 'my.customization',
+ name: 'My customization'
+ ...
+ },
+ ...
+];
+
+export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => {
+ // 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="./" %}
+[README](./)
+{% endcontent-ref %}
+
+Read about running code before log in using an `appEntryPoint`:
+
+{% content-ref url="./app-entry-point.md" %}
+[App Entry Point](./app-entry-point.md)
+{% endcontent-ref %}
diff --git a/15/umbraco-cms/customizing/umbraco-package.md b/15/umbraco-cms/customizing/umbraco-package.md
index 26c68621c35..e48638e5615 100644
--- a/15/umbraco-cms/customizing/umbraco-package.md
+++ b/15/umbraco-cms/customizing/umbraco-package.md
@@ -130,7 +130,7 @@ These are the current types of UI Extensions:
| Type | Description |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| authProvider | An authentication provider for [external login](../reference/security/external-login-providers.md). |
-| appEntryPoint | An app entry point is a JavaScript module that is executed when any app is loaded (Login, Installer, Upgrader, and Backoffice). It will never be destroyed. Read more about [Entry Points](extending-overview/extension-types/backoffice-entry-point.md). |
+| appEntryPoint | An app entry point is a JavaScript module that is executed when any app is loaded (Login, Installer, Upgrader, and Backoffice). It will never be destroyed. Read more about [Entry Points](extending-overview/extension-types/app-entry-point.md). |
| backofficeEntryPoint | A backoffice entry point is a JavaScript module that is executed when the backoffice is loaded. It will be destroyed when the backoffice is closed or logged out. Read more about [Entry Points](extending-overview/extension-types/backoffice-entry-point.md). |
| blockEditorCustomView | A custom view for a block in the block editor. |
| bundle | A bundle is a collection of other manifests that can be loaded together. You would use this in lieu of a `backofficeEntryPoint` if all you needed was to load extensions through JavaScript. |