Multi site management with AEM authoring as your content source

Multi Site Manager (MSM) and its Live Copy features enable you to use the same site content in multiple locations, while allowing for variations. You can author content once and create Live Copies. MSM maintains live relationships between your source content and its Live Copies so that when you change the source content, the source and Live Copies can be synchronized.

You can use MSM to create an entire content structure for your brand across locales and languages, authoring the content centrally. Your localized sites can then each be delivered by Edge Delivery Services, leveraging a central code base.

In order to leverage MSM on Edge Delivery Services with AEM authoring, you must enable the repoless feature.

Requirements

To configure MSM, you must first complete the following tasks:

This document assumes that you have already created a site for your project based on the Getting Started – Universal Editor Developer Tutorial
You must have already enabled the repoless feature for your project.

Use case

This document assumes that you have already created a basic localized site structure for your project. It uses the following structure for the website brand with a presence in Switzerland and Germany as an example.

/content/website
/content/website/language-masters
/content/website/language-masters/en
/content/website/language-masters/de
/content/website/language-masters/fr
/content/website/language-masters/it
/content/website/ch
/content/website/ch/de
/content/website/ch/fr
/content/website/ch/it
/content/website/ch/en
/content/website/de
/content/website/de/de
/content/website/de/en

Content in language-masters is the source of Live Copies for the localized sites: Germany (de) and Switzerland (ch). The goal of this document is to create Edge Delivery Services sites that all use the same code base for each localized site.

Configuration

There are several steps to configuring the MSM repoless use case.

Update AEM site configurations.
Create new Edge Delivery Services sites for your localized pages.
Update cloud configuration in AEM for your localized sites.

This document details these steps.

Update AEM site configurations

Configurations can be thought of as workspaces that can be used to gather groups of settings and their associated content for organizational purposes. When you create a site in AEM, a configuration is automatically created for it.

You generally want to share certain content between sites such as:

Templates created from content in the blueprint
Content Fragment models, persisted, queries etc.

You can create additional configurations to facilitate such sharing. For the website use case, we would need configurations for the following paths.

/content/website
/content/website/ch
/content/website/de

That is, you will have a configuration for the root of the website brand’s content (/content/website) used by the blueprints and a configuration used by each localized site (Switzerland and Germany).

Sign into your AEM authoring instance.
Navigate to the Configuration Browser by going to Tools → General → Configuration Browser.
Select the configuration that was automatically created for your project (in this case website) and then tap or click Create in the toolbar.
In the Create Configuration dialog, provide a descriptive Name for your localized site (such as Switzerland) and for the Title use the same title of the localized size (in this case ch).
Select the Cloud Configuration feature and any additional features you may need for your project such as Editable Templates.
Tap or click Create.

Create configurations for each localized site you need. In the case of website, you would need to create a configuration for de as well alongside the ch configuration.

Once the configurations are created, you need to ensure that the localized sites use them.

Sign into your AEM authoring instance.
Navigate to the Sites console by going to Navigation → Sites.
Select the localized site such as Switzerland.
Tap or click Properties in the tool bar.
In the page properties window, select the Advanced tab and under the Configuration heading, unselect the option Inherited from /content/website, where website is the site root.
In Cloud Configuration field, use the path browser to select the configuration you created for your localized site such as Switzerland under /conf/website/ch.
Tap or click Save & Close.

Assign the respective configurations to the additional localized sites. In the case of website, you would need to assign the /conf/website/de configuration to the Germany site as well.

Create new Edge Delivery Services sites for your localized pages

To connect more sites to Edge Delivery Services for a multi-region, multi-language site setup, you must set up a new aem.live site for each of your AEM MSM sites. There is a 1:1 relationship between AEM MSM sites and aem.live sites with a shared Git repository and code base.

For this example, we will create the site website-ch for the Swiss presence of website, whose localized content is under the AEM path /content/website/ch.

Retrieve your auth token and the technical account for your program.
- Please see the document Reusing Code Across Sites for details on how to obtain your access token and the technical account for your program.
Create a new site by making the following call to the configuration service. Please consider:
- The project name in the POST URL must be the new site name you are creating. In this example, it is website-ch.
- The code configuration should be the same as you used for the initial project creation.
- The content → source → url must be adapted to the name of the new site you are creating. In this example, it is website-ch.
- I.e., the site name in POST URL and the content → source → url must be the same.
- Adapt the admin block to define the users who should have full administrative access to the site.
  - It is an array of email addresses.
  - The wildcard * can be used.
  - See the document Configuring Authentication for Authors for more information.

curl --request POST \
  --url https://admin.hlx.page/config/<your-github-org>/sites/website-ch.json \
  --header 'Content-Type: application/json' \
  --header 'x-auth-token: <your-token>' \
  --data '{
    "code": {
        "owner": "<your-github-org>",
        "repo": "website",
        "source": {
            "type": "github",
            "url": "https://github.com/<your-github-org>/website"
        }
    },
    "content": {
        "source": {
            "url": "https://author-p<programID>-e<environmentID>.adobeaemcloud.com/bin/franklin.delivery/<your-github-org>/website-ch/main",
            "type": "markup",
            "suffix": ".html"
        }
    },
    "access": {
        "admin": {
            "role": {
                "admin": [
                    "<email>@<domain>.<tld>"
                ],
                "config_admin": [
                    "<tech-account-id>@techacct.adobe.com"
                ]
            },
            "requireAuth": "auto"
        }
    }
}’

Add the path mapping for your new site by making the following call to the configuration service.

curl --request POST \
  --url https://admin.hlx.page/config/<your-github-org>/sites/website-ch/public.json \
  --header 'Content-Type: application/json' \
  --header 'x-auth-token: <your-token>' \
  --data '{
    "paths": {
        "mappings": [
            "/content/website/ch/:/"
        ],
        "includes": [
            "/content/website/ch/"
        ]
    }
}’

Verify that the public configuration of your new site is working by calling https://main--website-ch--<your-github-org>.aem.page/config.json and verifying the content of the returned JSON.

Repeat the steps to create additional localized sites. In the case of website, you would need to create a website-de site for the German presence as well.

Update Cloud Configurations in AEM for Your Localized Pages

Your pages in AEM must be configured to use the new Edge Delivery Sites you created in the previous section for your localized presence. In this example, content under /content/website/ch needs to know to use the website-ch site you created. Similarly content under /content/website/de needs to use the website-de site.

Sign into the AEM author instance and go to Tools → Cloud Services → Edge Delivery Services Configuration.
Select the configuration that was automatically created for your project and then the folder that was created for the localized page. In this case, that would be Switzerland (ch).
Tap or click Create > Configuration in the tool bar.
In the Edge Delivery Services Configuration window:
- Provide your GitHub organization in the Organization field.
- Change the site name to the name of the site you created in the previous section. In this case, that would be website-ch.
- Change project type to aem.live with repoless config setup.
Tap or click Save & Close.

Verify your setup

Now that you have made all of the necessary configuration changes, verify that everything is working as expected.

Sign into your AEM authoring instance.
Navigate to the Sites console by going to Navigation → Sites.
Select the localized site such as Switzerland.
Tap or click Edit in the toolbar.
Ensure that the page properly renders in the Universal Editor and uses the same code as your site root.
Make a change to the page and re-publish.
Visit your new Edge Delivery Services site for that localized page at https://main--website-ch--<your-github-org>.aem.page.

If you see the changes that you made, your MSM setup is working properly.