Preview: Fixes a potential issue where the preview URL could be a different backoffice host

[iOvergaard]

This pull request fixes preview URL generation when the backoffice is accessed from a different path than the default /umbraco. This particularly affects development workflows using the Vite dev server.

Problem

When developing with the Vite dev server (typically running on https://localhost:5173/), clicking Preview would generate URLs like /umbraco/preview?id=.... Since the Vite dev server doesn't have the /umbraco prefix, these URLs would fail to load.

Example Scenario:

• Vite dev server: https://localhost:5173/ (backoffice client)
• Backend API: https://localhost:44339/umbraco (API endpoints)
• Preview would try to open: https://localhost:5173/umbraco/preview?id=... ❌
• Should open: https://localhost:5173/preview?id=... ✅

Solution

Backend Changes:

• Removed hardcoded /umbraco path from preview URL generation in NewDefaultUrlProvider.cs
• Simplified DocumentUrlFactory.cs to return raw URLs without absolute URL conversion
• URLs now generated as relative paths: preview?id=... so they use the <base> tag in the browser automatically

Frontend Changes:

• Works correctly for both Vite dev server and production builds

Benefits

• ✅ Preview works correctly in Vite dev server development environment
• ✅ Load-balanced backoffice is supported
• ✅ Maintains backward compatibility with production builds
• ✅ More flexible URL handling for future scenarios
• ✅ Removes hardcoded path assumptions

[Copilot]

Pull Request Overview

This pull request fixes preview URL generation to work correctly when Umbraco runs with a custom backoffice path. The backend now generates cleaner preview URLs without the /umbraco path segment, while the frontend dynamically prepends the correct backoffice path when needed.

Key changes:

• Backend preview URLs no longer hardcode the /umbraco path segment
• Frontend dynamically prepends the backoffice path to preview URLs when necessary
• URL info creation logic now correctly uses the IsExternal property

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/Umbraco.Core/Routing/NewDefaultUrlProvider.cs	Removes hardcoded /umbraco path segment from preview URL generation
src/Umbraco.Cms.Api.Management/Factories/DocumentUrlFactory.cs	Fixes logic for determining when to ensure absolute URLs by using IsExternal directly instead of inverting it
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace.context.ts	Adds dynamic backoffice path handling to prepend correct path to preview URLs when needed

[Copilot]

Pull Request Overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[iOvergaard]

Test Directions

Test 1: Production Build Preview (Regression Test)

First, verify the fix doesn't break the standard production scenario.

1. Run production build:

   cd src/Umbraco.Web.UI
   dotnet run --no-build

   Backend will run on https://localhost:44339/umbraco

2. Access backoffice at standard URL: https://localhost:44339/umbraco

3. Open a document and click Preview

4. Expected: Preview opens successfully at https://localhost:44339/umbraco/preview?id=...

5. Make changes to the document and save

6. Expected: Preview automatically refreshes with updated content

Test 2: Vite Dev Server Preview (Main Bug Fix)

Now test the primary use case - developing with the Vite dev server.

1. Stop the backend (Ctrl+C if still running)

2. Configure backend for frontend development - Add to src/Umbraco.Web.UI/appsettings.json under Umbraco:CMS:Security:

   "BackOfficeHost": "http://localhost:5173",
   "AuthorizeCallbackPathName": "/oauth_complete",
   "AuthorizeCallbackLogoutPathName": "/logout",
   "AuthorizeCallbackErrorPathName": "/error"

3. Start the backend API:

   cd src/Umbraco.Web.UI
   dotnet run --no-build

   Backend will run on https://localhost:44339/umbraco

4. Start the Vite dev server:

   cd src/Umbraco.Web.UI.Client
   npm run dev:server

   Frontend will run on http://localhost:5173/

5. Access backoffice via Vite dev server: http://localhost:5173/

6. Open a document for editing and click the Preview button

7. Expected: Preview opens successfully at http://localhost:5173/preview?id=... (without /umbraco prefix) ✅

8. Make changes to the document and save

9. Expected: Preview window automatically refreshes with updated content

What Changed

Before this fix:

• Preview URL was hardcoded with /umbraco prefix in the backend
• Vite dev server preview would fail (trying to load /umbraco/preview on port 5173) ❌

After this fix:

• Backend generates relative preview URLs: preview?id=...
• Works for both Vite dev server (http://localhost:5173/) and production builds (/umbraco) ✅