AEM Edge Delivery - Create Brand Specific EDS Sites using Repoless


Edge Delivery is rapidly evolving, for latest latest documentation please refer to www.aem.live documentation

Following steps outline the process to create Brand Specific EDS Sites using a single code repository aka Repoless

For indepth understanding and setting up EDS, create first site follow: https://www.aem.live/developer/ue-tutorial 

For more understanding on setting brand specific sites using repoless check: https://www.aem.live/developer/repoless-multisite-manager



Create Original Site

1) Navigate to https://github.com/adobe-rnd/aem-boilerplate-xwalk -> Use this template -> Create a new repository eg. eaem-rde-eds

2) In a new tab in the same browser, navigate to https://github.com/apps/aem-code-sync and click Configure

3) Select the repository eg. schoudry/eaem-rde-eds and save

4) Clone the repo eaem-rde-eds to your IDE, open eaem-rde-eds/fstab.yaml and give your AEM author url in format https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main

mountpoints:
  /:
    url: "https://author-p10961-e1322140.adobeaemcloud.com/bin/franklin.delivery/schoudry/eaem-rde-eds/main"
    type: "markup"
    suffix: ".html"

6) Open eaem-rde-eds/paths.json and provide the site name for mapping eg. eaem-rde-eds

{
  "mappings": [
    "/content/eaem-rde-eds/:/",
    "/content/eaem-rde-eds/configuration:/.helix/config.json",
    "/content/eaem-rde-eds/metadata:/metadata.json"
  ],
  "includes": [
    "/content/eaem-rde-eds/"
  ]
}

7) Commit and push the changes made to fstab.yaml and paths.json

8) Download the latest AEM authoring EDS template from https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases eg. aem-sites-with-edge-delivery-services-template-0.1.2.zip

9) Navigate to the Sites console and click Create -> Site from template, click the Import button to import the template downloaded above. Once uploaded it can be reused to create additional sites

10) In the next screen of wizard, provide... 

                     Site title: Experience AEM RDE EDS Site 

                     Site name: eaem-rde-eds

                     Github url: https://github.com/schoudry/eaem-rde-eds

11) A background job is created, and when done you can see the inbox item  Background Job with source: "/content/eaem-rde-eds" has completed successfully.

12) Edit the index page eg. /content/eaem-rde-eds/index to open it in universal editor eg. https://author-p10961-e1322140.adobeaemcloud.com/ui#/@acsaem/aem/universal-editor/canvas/author-p10961-e1322140.adobeaemcloud.com/content/eaem-rde-eds/index.html

13) In Sites console use the Quick Publish to publish pages index, nav, footer and view the pages in Preview, Live using format https://main--<repository-name>--<owner>.aem.page 

                    eg. Preview: https://main--eaem-rde-eds--schoudry.aem.page

                    eg. Live: https://main--eaem-rde-eds--schoudry.aem.live/


Create Repoless Brand Site

1) Get the token by logging into  https://admin.hlx.page/login and clicking https://admin.hlx.page/auth/adobe, copy auth_token cookie from browser console to pass it in admin api requests as -H 'x-auth-token: <your-token>'


2) Add a page of template type Configuration at /content/eaem-rde-eds 


3) Navigate to the Configuration Browser by going to Tools -> General -> Configuration Browser, and create config /conf/eaem-rde-eds/eaem-rde-eds-brand-six


4) Create the site structure /content/eaem-rde-eds/eaem-rde-eds-brand-six and /content/eaem-rde-eds/eaem-rde-eds-brand-six/index using regular page template and set the cloud configuration in Page Properties -> Advanced of /content/eaem-rde-eds/eaem-rde-eds-brand-six to /conf/eaem-rde-eds/eaem-rde-eds-brand-six


5) Add config of site eaem-rde-eds-brand-six by doing a POST to https://admin.hlx.page/config/schoudry/sites/eaem-rde-eds-brand-six.json ( get the tech account by going to Tools -> Cloud Services -> Edge Delivery Services Configuration and picking up from original site)





6) Update the paths for eaem-rde-eds-brand-six by making a POST request to https://admin.hlx.page/config/schoudry/sites/eaem-rde-eds-brand-six.json/public.json and validate the config on live https://main--eaem-rde-eds-brand-one--schoudry.aem.live/config.json


7) Make the configuration eaem-rde-eds repoless by going to Tools -> Cloud Services -> Edge Delivery Services (eg. https://author-p10961-e1322140.adobeaemcloud.com/ui#/aem/libs/core/franklin/shell/content/configuration.html/conf?appId=aemshell)


8) At the same place (Tools -> Cloud Services -> Edge Delivery Services) create configuration for the brand site /conf/eaem-rde-eds/eaem-rde-eds-brand-six





9) Add some content to the brand six index page /content/eaem-rde-eds/eaem-rde-eds-brand-six/index and publish it to live and check Check https://main--eaem-rde-eds-brand-six--schoudry.aem.live/

10) Creating another brand, eaem-rde-eds-brand-six similar way here is the site structure and rendering


11) Comparing the brand sites EDS config below, you can see the code is same but content is being pulled from different source structures

                 https://admin.hlx.page/config/schoudry/sites/eaem-rde-eds-brand-six.json

                 https://admin.hlx.page/config/schoudry/sites/eaem-rde-eds-brand-seven.json



12) Use the site admin tool to manage sites https://tools.aem.live/tools/site-admin/index.html











No comments:

Post a Comment