V15: Backoffice Entry Points

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)

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.
 
-<pre class="language-typescript"><code class="lang-typescript">export const manifests: Array&#x3C;UmbExtensionManifest> = [
-<strong>    {
-</strong>        type: '...',
+{% code title="manifests.ts" %}
+```typescript
+export const manifests: Array<UmbExtensionManifest> = [
+    {
+        type: '...',
         alias: 'my.customization',
         name: 'My customization'
         ...
-    },
-    ...
-];
-</code></pre>
+    }
+]
+```
+{% 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`
 

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) <a href="#entry-point" id="entry-point"></a>
+### [Backoffice Entry Point](backoffice-entry-point.md) <a href="#entry-point" id="entry-point"></a>
 
-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) <a href="#conditions" id="conditions"></a>
 

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 %}

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 @@
     ]
 }
 ```
+{% 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<UmbExtensionManifest> = [
+    {
+        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 %}

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.                                                                                                                                                                                        |