Setting up content editing for an externally hosted frontend brea

Setting up content editing for an externally hosted frontend breaks images in edit mode.

Erik Henningson

Vote:

If you configure the CMS to use an external frontend site (to enable on-page editing on the externa site), images will break at some places in edit mode. Thumbnail images for example.

Configuration:

services.ConfigureForExternalTemplates();
services.Configure<ExternalApplicationOptions>(options => options.OptimizeForDelivery = true);

Thumbnail images will get this url

https://my-frontend-host.com/EPiServer/CMS/Content/globalassets/test-assets/hero.jpg,,62/Thumbnail?epieditmode=False?1695142172388

my-fronend-host.com is the frontend site, not the CMS site.

I have tried to set the CMS-hostname to type "Edit", but that didn't help.

Is this a bug, or did I configure something wrong?

#308707

Sep 19, 2023 17:10

Erik Henningson

Vote:

How to reproduce

Set up a new cms by doing dotnet new epi-alloy-mvc
Update to latest version of Episerver.CMS (12.22.8)
Add latest version of EPiServer.ContentDeliveryAPI.CMS (3.9.0)
and configure Delivery API like this:
services.AddContentDeliveryApi(options =>
{
}).WithFriendlyUrl();
services.Configure<EPiServer.ContentApi.Core.Configuration.ContentApiOptions>(options =>
{
options.IncludeEmptyContentProperties = false;
options.IncludeMasterLanguage = false;
});
Configure edtiting on external site like this
services.ConfigureForExternalTemplates();
services.Configure<ExternalApplicationOptions>(options => options.OptimizeForDelivery = true);
Add a new host under Manage Websites in admin mode
Host name: my-frontend-host.com
Type: Primary

Errors

1. ForceAbsolute option for ContentDelivery API will have no effect on the json returned from the API. Host name is always included.
2. Thumbnail images are broken in edit mode, since they are requested using the frontend host name (but with the port of the CMS host)

#309840

Oct 02, 2023 14:50

Mark Hall

Vote:

When decompiling the method seems it does the following

 public void ConfigureForExternalTemplates()
        {
            ServiceLocator.Current.GetInstance<RoutingOptions>().UsePrimaryHostForOutgoingUrls = true;
            RegisterFakeTemplate = true;
        }

Based on that code seems to be doing what you are describing. Not sure why you would ever use primary host for images though.

#309841

Oct 02, 2023 15:06

Erik Henningson - Oct 03, 2023 7:35

Thanks Mark! Maybe I should try to not call ConfigureForExternalTemplates, but just RegisterFakeTemplate, and see if that works 😊

Erik Henningson - Oct 04, 2023 6:53

Nah, that didn't help.
I tried
services.Configure(delegate (TemplateOptions r)
{
r.RegisterFakeTemplate = true;
});
services.Configure(delegate (ContentApiOptions options)
{
options.ValidateTemplateForContentUrl = false;
});
instead of
services.ConfigureForExternalTemplates();
It fixes the issue with thumbnails, but it it doesn't load the external site when trying to do on-page editing.

Try our conversational search powered by Generative AI!

Setting up content editing for an externally hosted frontend breaks images in edit mode.