add app context to get the backofficePath

src/Umbraco.Web.UI.Client/src/app-config.interface.ts

@@ -0,0 +1,13 @@
+/**
+ * Configuration interface for the Umbraco App Element.
+ * @export
+ * @interface UmbAppConfig
+ */
+export interface UmbAppConfig {
+	/**
+	 * The base path of the backoffice.
+	 * @type {string}
+	 * @memberof UmbAppConfig
+	 */
+	backofficePath: string;
+}

src/Umbraco.Web.UI.Client/src/app.context.ts

@@ -0,0 +1,16 @@
+import { UmbAppConfig } from './app-config.interface';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export class UmbAppContext {
+	#backofficePath: string;
+
+	constructor(config: UmbAppConfig) {
+		this.#backofficePath = config.backofficePath;
+	}
+
+	getBackofficePath() {
+		return this.#backofficePath;
+	}
+}
+
+export const UMB_APP = new UmbContextToken<UmbAppContext>('UMB_APP');

src/Umbraco.Web.UI.Client/src/app.ts

@@ -13,6 +13,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { UmbAuthFlow } from './core/auth/auth-flow';
 import { UmbIconStore } from './core/stores/icon/icon.store';
 import type { UmbErrorElement } from './error/error.element';
+import { UMB_APP, UmbAppContext } from './app.context';
 import type { Guard, UmbRoute } from '@umbraco-cms/backoffice/router';
 import { pathWithoutBasePath } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -37,7 +38,8 @@ export class UmbAppElement extends UmbLitElement {
 	 * @attr
 	 */
 	@property({ type: String })
-	private backofficePath = '/umbraco';
+	// TODO: get from server config
+	private backofficePath = import.meta.env.DEV ? '' : '/umbraco';
 
 	private _routes: UmbRoute[] = [
 		{
@@ -73,6 +75,8 @@ export class UmbAppElement extends UmbLitElement {
 			`${window.location.origin}${this.backofficePath}`
 		);
 
+		// TODO: Make a combined App Context
+		this.provideContext(UMB_APP, new UmbAppContext({ backofficePath: this.backofficePath }));
 		this.provideContext(UMB_SERVER_URL, OpenAPI.BASE);
 
 		this._setup();

src/Umbraco.Web.UI.Client/src/backoffice/core/components/backoffice-frame/backoffice-header.element.ts

@@ -1,17 +1,31 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { css, CSSResultGroup, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { css, CSSResultGroup, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UMB_APP } from '../../../../app.context';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 
 import './backoffice-header-sections.element';
 import './backoffice-header-apps.element';
 
 @customElement('umb-backoffice-header')
-export class UmbBackofficeHeaderElement extends LitElement {
+export class UmbBackofficeHeaderElement extends UmbLitElement {
+	@state()
+	_backofficePath = '';
+
+	constructor() {
+		super();
+
+		new UmbContextConsumerController(this, UMB_APP, (appContext) => {
+			this._backofficePath = appContext.getBackofficePath();
+		});
+	}
+
 	render() {
 		return html`
 			<div id="appHeader">
 				<uui-button id="logo" look="primary" label="Umbraco" compact>
-					<img src="/umbraco_logomark_white.svg" alt="Umbraco" />
+					<img src="${this._backofficePath}/umbraco_logomark_white.svg" alt="Umbraco" />
 				</uui-button>
 
 				<umb-backoffice-header-sections id="sections"></umb-backoffice-header-sections>