AEM Edge Delivery Services (EDS)

This is a developer introduction to AEM EDS.

Details architecture -

https://github.com/adobe/helix-home/blob/main/docs/architecture.md

Main Docs -

https://www.aem.live/

Code for aem.live - https://github.com/adobe/helix-website?

Coding -

Setup for Document-Based Authoring -

• Create an EDS project using boiler-plate project from github (https://github.com/adobe/aem-boilerplate).
• Install AEM Code Sync GitHub App repo so code changes get pushed to EDS code bus.
• Create content on Google drive location and share location with AEM user [email protected]
• Update the folder URL from your Google Drive to fstab.yaml
• Add AEM Sidekick plugin in chrome browser and publish your page
• Are you able to access .aem.page and .aem.live pages yet?
• Code will be moved to code bus via AEM Code Sync app and content will be fetched using Sidekick by content bus. When a user requests a page, Helix admin takes the code from code bus and content from content bus and assets from media bus then dynamically renders the page and send it to CDN.?

Local env -

• It's a node js project so install npm in your local
• Install the AEM Command Line Interface (CLI)
• clone your repo in local and run aem up

Setup for Universal Editor -

Setup for Universal Editor is little different.

• Create an EDS project using another boiler-plate project https://github.com/adobe-rnd/aem-boilerplate-xwalk
• It adds three new files at root level - component-definition.json, component-models.json, and component-filters.json.
• Also each block will have an additional json file with content model definition, model, and filter. Ex. _cards.json
• Rest of the steps are same.
• One main different between Document-base authoring and Universal editor is that Universal editor requires Content Modeling. Instead of content tables for blocks, you will need to add blocks in Universal Editor and for that you will need content models.

Content

Universal Editor

• A modern what-you-see-is-what-you-get (WYSIWYG) UI for authoring content within AEM. The content you author is persisted in AEM as a Cloud Service.
• If you are choosing Universal editor as your authoring tool, you need to setup you repo little different. Follow this guide.

Document-Based Authoring

• Word doc or Google Docs become your pages on your website. Your headings in your documents will become headings on your website. Bold, italic, underlining, lists, images, etc. will all appear on your website
• Sections - create different sections of page using --- (three hyphens) on a single line
• Most important - Blocks - for more structured content and add custom functionality to your site. JS will add class name to div same as first row of table. This name of block will map the css/js of block code to this div.

• Add metadata to your page or section, create a table like the following

How does content document and code (js/css) gets mapped? content doc > markup > DOM > HTML

• AEM converts content doc to very easy readable markup, check view source of page and it will show markup
• scripts.js/aem.js converts markup into a DOM, it adds more div and classes

Other important site wide features

• Sitemap - automatically generated sitemap files to be referenced from your robots.txt https://www.aem.live/developer/sitemap
• Indexing - index of all the published pages https://www.aem.live/developer/indexing
• Sidekick Library - setup the sidekick library and configure the blocks plugin https://www.aem.live/docs/sidekick-library
• Web Performance, Lighthouse Score 100 - With the Real Use Monitoring (RUM)
• EDS to AEP/Adobe Target integration using AEP WebSDK alloy - https://www.aem.live/developer/target-integration
• Repoless - Using one repo for many sites. This is very important for large organizations because they always have multiple sites for different regions and languages so going repoless is must for large organizations. It removes many of site-wide settings from code and move them to configs. Repoless MSM feature.

My demo -

https://main--space--ajaykumar138.aem.live/?