Add app configuration

README.md

@@ -9,7 +9,18 @@ The Studio UI Bundle provides a Backend UI for Pimcore. It is based on the [Reac
 ## How to open
 
 - Login via the classic backend UI
-- Access it under `{your-domain}/admin/studio`
+- Access it under `{your-domain}/pimcore-studio`
+
+#### Run the UI under a different URL
+
+To change the URL you can add the following configuration:
+
+´´´yaml
+pimcore_studio_ui:
+    url_path: '/my-backend'
+´´´
+
+Studio will be now accessible under `{your-domain}/my-backend`.
 
 ## Development
 

assets/dist/sdk/manifest.json

@@ -71,14 +71,14 @@
   "dist/../build/types/src/core/modules/widget-manager/services/widget-registry.d.ts": "/dist/../build/types/src/core/modules/widget-manager/services/widget-registry.d.ts",
   "dist/../build/types/src/core/app/module-system/module-system.d.ts": "/dist/../build/types/src/core/app/module-system/module-system.d.ts",
   "dist/../build/types/src/core/modules/widget-manager/widget/widget-container.d.ts": "/dist/../build/types/src/core/modules/widget-manager/widget/widget-container.d.ts",
+  "dist/../build/types/src/core/bootstrap.d.ts": "/dist/../build/types/src/core/bootstrap.d.ts",
   "dist/../build/types/src/core/components/notification/content/action-list/action-list.d.ts": "/dist/../build/types/src/core/components/notification/content/action-list/action-list.d.ts",
   "dist/../build/types/src/core/components/dropdown-menu/dropdown-menu.d.ts.map": "/dist/../build/types/src/core/components/dropdown-menu/dropdown-menu.d.ts.map",
   "dist/../build/types/src/core/app/config/services/index.d.ts": "/dist/../build/types/src/core/app/config/services/index.d.ts",
   "dist/../build/types/src/core/components/text-editor/text-editor.d.ts": "/dist/../build/types/src/core/components/text-editor/text-editor.d.ts",
   "dist/../build/types/src/core/components/modal/modal.d.ts": "/dist/../build/types/src/core/components/modal/modal.d.ts",
   "dist/../build/types/src/core/components/progressbar/progressbar.stories.d.ts": "/dist/../build/types/src/core/components/progressbar/progressbar.stories.d.ts",
   "dist/../build/types/src/core/components/tree/node/tree-node.d.ts": "/dist/../build/types/src/core/components/tree/node/tree-node.d.ts",
-  "dist/../build/types/src/core/bootstrap.d.ts": "/dist/../build/types/src/core/bootstrap.d.ts",
   "dist/../build/types/src/core/components/dropdown-menu/dropdown-menu.stories.d.ts": "/dist/../build/types/src/core/components/dropdown-menu/dropdown-menu.stories.d.ts",
   "dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/preview/preview-container.d.ts": "/dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/preview/preview-container.d.ts",
   "dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-toolbar-container.d.ts": "/dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-toolbar-container.d.ts",
@@ -289,6 +289,7 @@
   "dist/../build/types/src/core/components/logo/logo.styles.d.ts": "/dist/../build/types/src/core/components/logo/logo.styles.d.ts",
   "dist/../build/types/src/core/components/tree/tree.styles.d.ts": "/dist/../build/types/src/core/components/tree/tree.styles.d.ts",
   "dist/../build/types/src/core/modules/asset/editor/types/document/index.d.ts": "/dist/../build/types/src/core/modules/asset/editor/types/document/index.d.ts",
+  "dist/../build/types/src/core/app/router/router.d.ts": "/dist/../build/types/src/core/app/router/router.d.ts",
   "dist/../build/types/src/core/app/config/date-time.d.ts": "/dist/../build/types/src/core/app/config/date-time.d.ts",
   "dist/../build/types/src/core/modules/widget-manager/utils/widget-manager-inner-model.d.ts": "/dist/../build/types/src/core/modules/widget-manager/utils/widget-manager-inner-model.d.ts",
   "dist/../build/types/src/core/modules/widget-manager/utils/widget-manager-outer-model.d.ts": "/dist/../build/types/src/core/modules/widget-manager/utils/widget-manager-outer-model.d.ts",
@@ -324,6 +325,7 @@
   "dist/../build/types/src/core/components/background/background.d.ts": "/dist/../build/types/src/core/components/background/background.d.ts",
   "dist/../build/types/src/core/components/toolbar/toolbar.d.ts.map": "/dist/../build/types/src/core/components/toolbar/toolbar.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/image/tab-manager/tabs/preview/sidebar/tabs/details/details.d.ts": "/dist/../build/types/src/core/modules/asset/editor/types/image/tab-manager/tabs/preview/sidebar/tabs/details/details.d.ts",
+  "dist/../build/types/src/core/app/config/app-config.d.ts": "/dist/../build/types/src/core/app/config/app-config.d.ts",
   "dist/../build/types/src/core/modules/app/base-layout/right-sidebar-view.d.ts": "/dist/../build/types/src/core/modules/app/base-layout/right-sidebar-view.d.ts",
   "dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/preview/preview-container.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/preview/preview-container.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/unknown/unknown-container.d.ts": "/dist/../build/types/src/core/modules/asset/editor/types/unknown/unknown-container.d.ts",
@@ -347,7 +349,6 @@
   "dist/../build/types/src/core/app/module-system/module-system.d.ts.map": "/dist/../build/types/src/core/app/module-system/module-system.d.ts.map",
   "dist/../build/types/src/core/utils/hooks/use-previous.d.ts": "/dist/../build/types/src/core/utils/hooks/use-previous.d.ts",
   "dist/../build/types/src/core/modules/auth/hooks/use-is-authenticated.d.ts": "/dist/../build/types/src/core/modules/auth/hooks/use-is-authenticated.d.ts",
-  "dist/../build/types/src/core/app/router/router.d.ts": "/dist/../build/types/src/core/app/router/router.d.ts",
   "dist/../build/types/src/core/components/pagination/inline-textfield/inline-textfield.d.ts.map": "/dist/../build/types/src/core/components/pagination/inline-textfield/inline-textfield.d.ts.map",
   "dist/../build/types/test-utils/test-utils.d.ts.map": "/dist/../build/types/test-utils/test-utils.d.ts.map",
   "dist/../build/types/src/core/modules/auth/hooks/use-middleware.d.ts": "/dist/../build/types/src/core/modules/auth/hooks/use-middleware.d.ts",
@@ -413,6 +414,7 @@
   "dist/../build/types/src/core/modules/widget-manager/widget-manager-view.d.ts.map": "/dist/../build/types/src/core/modules/widget-manager/widget-manager-view.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/document/tab-manager/tabs/preview/preview-view.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/document/tab-manager/tabs/preview/preview-view.d.ts.map",
   "dist/../build/types/src/core/components/tree/node/content/tree-node-content.d.ts.map": "/dist/../build/types/src/core/components/tree/node/content/tree-node-content.d.ts.map",
+  "dist/../build/types/src/core/bootstrap.d.ts.map": "/dist/../build/types/src/core/bootstrap.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/image/tab-manager/tabs/preview/preview-view.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/image/tab-manager/tabs/preview/preview-view.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/video/tab-manager/tabs/preview/preview-view.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/video/tab-manager/tabs/preview/preview-view.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/link/link-container.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/grid-columns/link/link-container.d.ts.map",
@@ -423,7 +425,6 @@
   "dist/../build/types/src/core/components/icon/icon.d.ts.map": "/dist/../build/types/src/core/components/icon/icon.d.ts.map",
   "dist/../build/types/src/core/components/editor-tabs/editor-tabs.stories.d.ts.map": "/dist/../build/types/src/core/components/editor-tabs/editor-tabs.stories.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/editor-container.stories.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/editor-container.stories.d.ts.map",
-  "dist/../build/types/src/core/bootstrap.d.ts.map": "/dist/../build/types/src/core/bootstrap.d.ts.map",
   "dist/../build/types/src/core/components/modal/footer/modal-footer.d.ts.map": "/dist/../build/types/src/core/components/modal/footer/modal-footer.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/document/tab-manager/document-tab-manager.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/document/tab-manager/document-tab-manager.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/shared-tab-manager/tabs/schedule/components/table/table.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/shared-tab-manager/tabs/schedule/components/table/table.d.ts.map",
@@ -567,6 +568,7 @@
   "dist/../build/types/src/core/modules/element/editor/layouts/tabs-toolbar-view.styles.d.ts.map": "/dist/../build/types/src/core/modules/element/editor/layouts/tabs-toolbar-view.styles.d.ts.map",
   "dist/../build/types/src/core/components/grid/columns/types/boolean/boolean-cell.styles.d.ts.map": "/dist/../build/types/src/core/components/grid/columns/types/boolean/boolean-cell.styles.d.ts.map",
   "dist/../build/types/src/core/modules/example/containers/example.d.ts.map": "/dist/../build/types/src/core/modules/example/containers/example.d.ts.map",
+  "dist/../build/types/src/core/app/config/app-config.d.ts.map": "/dist/../build/types/src/core/app/config/app-config.d.ts.map",
   "dist/../build/types/src/core/components/grid/columns/views/image/image-view.styles.d.ts.map": "/dist/../build/types/src/core/components/grid/columns/views/image/image-view.styles.d.ts.map",
   "dist/../build/types/src/core/components/vertical-timeline/vertical-timeline.styles.d.ts.map": "/dist/../build/types/src/core/components/vertical-timeline/vertical-timeline.styles.d.ts.map",
   "dist/../build/types/src/core/components/grid/columns/types/text/text-cell.styles.d.ts.map": "/dist/../build/types/src/core/components/grid/columns/types/text/text-cell.styles.d.ts.map",
@@ -600,6 +602,7 @@
   "dist/../build/types/src/core/components/drag-and-drop/draggable.styles.d.ts.map": "/dist/../build/types/src/core/components/drag-and-drop/draggable.styles.d.ts.map",
   "dist/../build/types/src/core/components/drag-and-drop/droppable.styles.d.ts.map": "/dist/../build/types/src/core/components/drag-and-drop/droppable.styles.d.ts.map",
   "dist/../build/types/src/core/components/progressbar/progressbar.style.d.ts.map": "/dist/../build/types/src/core/components/progressbar/progressbar.style.d.ts.map",
+  "dist/../build/types/src/core/app/router/router.d.ts.map": "/dist/../build/types/src/core/app/router/router.d.ts.map",
   "dist/../build/types/src/core/components/pagination/pagination.styles.d.ts.map": "/dist/../build/types/src/core/components/pagination/pagination.styles.d.ts.map",
   "dist/../build/types/src/core/components/tree/list/tree-list.styles.d.ts.map": "/dist/../build/types/src/core/components/tree/list/tree-list.styles.d.ts.map",
   "dist/../build/types/src/core/components/background/background.styles.d.ts.map": "/dist/../build/types/src/core/components/background/background.styles.d.ts.map",
@@ -621,7 +624,6 @@
   "dist/../build/types/src/core/components/tree/tree.styles.d.ts.map": "/dist/../build/types/src/core/components/tree/tree.styles.d.ts.map",
   "dist/../build/types/src/core/utils/hooks/use-previous.d.ts.map": "/dist/../build/types/src/core/utils/hooks/use-previous.d.ts.map",
   "dist/../build/types/src/core/app/api/pimcore/index.d.ts.map": "/dist/../build/types/src/core/app/api/pimcore/index.d.ts.map",
-  "dist/../build/types/src/core/app/router/router.d.ts.map": "/dist/../build/types/src/core/app/router/router.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/folder/index.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/folder/index.d.ts.map",
   "dist/../build/types/src/core/modules/asset/editor/types/image/index.d.ts.map": "/dist/../build/types/src/core/modules/asset/editor/types/image/index.d.ts.map",
   "dist/../build/types/src/core/modules/asset/index.d.ts.map": "/dist/../build/types/src/core/modules/asset/index.d.ts.map",

assets/js/src/core/app/config/app-config.ts

@@ -0,0 +1,33 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+interface AppConfig {
+  baseUrl: string
+}
+
+const appElement = document.querySelector('#app')
+
+if (appElement === null) {
+  console.warn('App element not found')
+}
+
+const appConfigJSON = appElement?.getAttribute('data-app-config') ?? null
+let appConfigData: AppConfig | null = null
+
+if (appConfigJSON !== null) {
+  appConfigData = JSON.parse(appConfigJSON)
+}
+
+export const appConfig: AppConfig = {
+  baseUrl: appConfigData?.baseUrl ?? '/pimcore-studio/'
+}

assets/js/src/core/app/router/router.tsx

@@ -15,14 +15,26 @@ import React from 'react'
 import { createBrowserRouter } from 'react-router-dom'
 import { DefaultPage } from '@Pimcore/modules/app/default-page'
 import { LoginPage } from '@Pimcore/modules/auth/login-page'
+import { appConfig } from '../config/app-config'
+
+let baseUrl = appConfig.baseUrl
+
+if (baseUrl.endsWith('/')) {
+  baseUrl = baseUrl.slice(0, -1) + '/'
+}
+
+export const routes = {
+  root: baseUrl,
+  login: `${baseUrl}login/`
+}
 
 export const router = createBrowserRouter([
   {
-    path: '/admin/studio',
+    path: routes.root,
     element: <DefaultPage />
   },
   {
-    path: '/admin/studio/login',
+    path: routes.login,
     element: <LoginPage />
   }
 ])

assets/js/src/core/bootstrap.ts

@@ -12,6 +12,7 @@
 */
 
 import 'reflect-metadata'
+import '@Pimcore/app/config/app-config'
 import '@Pimcore/app/module-system/module-system'
 import '@Pimcore/app/config/services'
 import '@Pimcore/app/i18n'

assets/js/src/core/modules/auth/hooks/use-middleware.ts

@@ -14,18 +14,19 @@
 import { useNavigate } from 'react-router-dom'
 import { useEffect } from 'react'
 import { useIsAuthenticated } from '@Pimcore/modules/auth/hooks/use-is-authenticated'
+import { routes } from '@Pimcore/app/router/router'
 
 export const useMiddleware = (): void => {
   const isAuthenticated = useIsAuthenticated()
   const navigate = useNavigate()
 
   useEffect(() => {
     if (isAuthenticated) {
-      navigate('/admin/studio')
+      navigate(routes.root)
     }
 
     if (!isAuthenticated) {
-      navigate('/admin/studio/login')
+      navigate(routes.login)
     }
   }, [isAuthenticated])
 }

config/pimcore/routing.yaml

@@ -1,5 +1,5 @@
 pimcore_studio_ui:
     resource: "@PimcoreStudioUiBundle/src/Controller/"
     type:     annotation
-    prefix:   /admin/studio
+    prefix:   '%pimcore_studio_ui.url_path%'
 

config/services.yaml

@@ -3,6 +3,8 @@ services:
         autowire: true
         autoconfigure: true
         public: false
+        bind:
+            $studioUrlUrlPath: '%pimcore_studio_ui.url_path%'
 
     # controllers are imported separately to make sure they're public
     # and have a tag that allows actions to type-hint services

public/core-dll/entrypoints.json

@@ -5,7 +5,7 @@
         "/bundles/pimcorestudioui/core-dll/core-dll.d9260c35.css"
       ],
       "js": [
-        "/bundles/pimcorestudioui/core-dll/core-dll.bb4f74b9.js"
+        "/bundles/pimcorestudioui/core-dll/core-dll.5d5e22e5.js"
       ]
     }
   }