Walkthrough: Enabling the DAM connector in a local development environment

To use Sitecore Digital Asset Management (DAM) in a local XM Cloud development environment running in a Docker container, you must configure and enable the DAM connector.

This walkthrough describes how to:

  • Configure a DAM connection

  • Configure and enable the DAM connector

  • Configure CORS for DAM

Prerequisites

Before you enable the DAM connector, you must have:

Configure a DAM connection

Important

If you don't have a content security policy (CSP), we strongly recommend you create one to guard against cross-site scripting (XSS) and data injection attacks. If you already have a CSP, you need to add the relevant Content Hub instance URLs.

To configure a DAM connection and add your CSP:

  1. Clone the source control repository linked to your XM Cloud environment.

  2. In the XM Cloud repository folder, create the following subfolder:

    RequestResponse
    {Project Repo Name}/src/platform/App_Data/Xdts

  3. Open the Xdts subfolder, create a file named Web.config.xdt, and open it for editing. Add the following code, then add your CSP in the value attribute value:

    RequestResponse
    <?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
    <location path="sitecore">
        <system.webServer>
            <httpProtocol>
                <customHeaders>	                            
                    <add xdt:Transform="SetAttributes" xdt:Locator="Match(name)" name="Content-Security-Policy" value="{Add your content security policy here}"/>
                </customHeaders>
            </httpProtocol>
        </system.webServer>
    </location>
</configuration>

    Ensure that the Content-Security-Policy tag contains the URL of the Content Hub instance (for example, content-hub-url.stylelabs.com), other delivery hostnames (for example, content-hub-url-delivery.stylelabs.cloud), and generated public links (for example, content-hub-url.stylelabs.com:8686).

    Note

    In Content Hub, you can configure different delivery hostnames for public links by using the AssetExtensionDataConfigurationSetting setting.

    If you have configured different hostnames, you must add all the hostnames as sources to the Content-Security-Policy parameter, in the img-src, child-src, and connect-src properties.

  4. Save the file.

  5. Apply the XDT transforms to your base image. For more information, see applying configuration transforms.

Configure and enable the DAM connector

The DAM connector adds the Insert from Sitecore DAM item to the Rich Text Default profile for the Rich Text Editor. To enable the insert function, you must configure a connection to Sitecore DAM.

To configure and enable the DAM connector:

  1. In Github, clone the project repository you created in Sitecore Cloud Portal,

  2. In your XM Cloud repository folder, open the .env file and add the following variables:

    Variable

    Value

    Description

    Sitecore_DAM_ContentHub

    ClientId={client_id};ClientSecret={client_secret};UserName={username};Password={password};URI={uri};

    Example: Sitecore_DAM_ContentHub=ClientId=App;ClientSecret=a51a8fb6-4f57-1234;UserName=john;Password=hunter2;URI=https://example.com/;

    The Client ID and Client Secret of the connector's OAuth client.

    The username and password of the user you created in Content Hub.

    uri of your Content Hub instance.

    Sitecore_DAM_SearchPage

    Sitecore Content Hub search page URI

    Example: Sitecore_DAM_SearchPage=https://sitecore-contenthub-dam-uri/en-us/sitecore-dam-connect/approved-assets

    The URI for the page that opens the DAM in an IFrame.

    Sitecore_DAM_ExternalRedirectKey

    Sitecore

    SITECORE_DAM_ENABLED

    yes

    By default, the DAM connector is disabled. To enable the connector, set this value to yes.

  3. Open the docker-compose.override.yml file, and add the following key-value pairs to the services > cm > environment attribute:

    RequestResponse
    Sitecore_ConnectionStrings_DAM_dot_ContentHub: ${Sitecore_DAM_ContentHub}
Sitecore_ConnectionStrings_DAM_dot_SearchPage: ${Sitecore_DAM_SearchPage}
Sitecore_ConnectionStrings_DAM_dot_ExternalRedirectKey: ${Sitecore_DAM_ExternalRedirectKey}
SITECORE_AppSettings_damEnabled__define: ${SITECORE_DAM_ENABLED}

  4. In the repository folder, open a Windows console and run the following command:

    RequestResponse
    docker compose up -d
    Note

    For information on setting up your local environment see Set up your full-stack XM Cloud local development environment

Configure CORS for DAM

To enable the Content Hub DAM iframe to successfully display in the Content Editor and XM Cloud Pages media item picker, you need to add the Pages and environment host name URLs to Content Hub CORS configuration.

To configure CORS for DAM:

  1. On the Sitecore DAM main menu, click Manage, then Settings.

  2. On the Settings page, click PortalConfiguration, then click CORSConfiguration.

  3. In URL field, enter the URL of XM Cloud Pages: https://pages.sitecorecloud.io/, then click Add.

  4. In URL field, enter https://, then the environment host name of your local environment, for example: https://xmcloudcm.localhost/, then click Add.

    You can now display DAM assets in the Content Editor.

Do you have some feedback for us?

If you have suggestions for improving this article,