Edge delivery Tutorial based on document authoring

What you need

• A GitHub account (where you can create a git repository)
• Node 20+
• An Adobe account
• The AEM CLI - npm install -g @adobe/aem-cli
• A code editor - Cursor or VS Code is recommended.
• AEM Sidekick
• Basic HTML, JS, and CSS skills
• An Edge Delivery Project - we'll quickly scaffold one out in the next 5 minutes.

Creating an Edge delivery project

1. Visit: da.live/start
2. Select “Author Kit”
3. Select “Use this template” on github
4. Go to the ReadMe file and press on Install AEM Code Sync link
   1. click configure
   2. select the organization and choose “only select repositories”
5. Go back to da.live/start
6. Paste your github URL
7. Make sure Author Kit is selected
8. Press “Make something wonderful”
9. In the background, the content is copied and configured
10. You are redirected to your folder structure in da.live

How to use the UI

1. Open the index page
2. Play around with the UI (see the options on top, and left, preview)

Doing a translation

1. Select the index page
2. Press share
3. Go to Apps -> Translate content
4. Give it a Title
5. Add URLs (use the one from your clipboard)
6. Press validate sources
7. Press confirm
8. Select languages
9. Press Start project
10. Press Translate all
11. Press Get status
12. Press Complete project
13. You’re all done!
14. Go back to your page

Extending translation config

1. Go to https://docs.da.live/administrators/reference/localization/sample-loc-configs
2. Select a config you want to use (e.g. Locale-based (language & region) Google Translate config)
3. Download translate.json
4. Go to your root folder and add /.da to your path
5. Upload the json file
6. Preview
7. Open the translate page (ignore the translation folder for now)
8. Check the configuration

Hint:

Translate = translate first, rollout afterwards
Rollout = only Rollout e.g. in case you manually translate the pages

Extending the UI on a page level

1. go to https://adobelabs.dev/developers-live/eds-micro-frontends/2 and follow the instructions

Next steps:

• Develop the other Apps from the EDS Micro Frontend demo https://adobelabs.dev/developers-live/eds-micro-frontends
• Play around with the translation app
• Test BYOM (see links below)

BYOM:

1. Demo Repository: https://github.com/larsauffarth/byom-demo
2. https://www.aem.live/developer/byom
3. https://www.aem.live/docs/admin.html#schema/ContentConfig
4. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/dynamic-page-publishing-in-aem-edge-delivery-with-byom-and-app/ba-p/766392
5. Developers live 2025 recording https://youtu.be/f5UtkTDados?si=obMC6qtaaIuMhXzq

Links:

FAQ: https://docs.da.live/about/faq#faq

Block Collection (offical ones): https://www.aem.live/developer/block-collection

Block Party (community based): https://www.aem.live/developer/block-party/

AI Agents Skills: https://www.aem.live/developer/ai-coding-agents#giving-agents-skills

Example Content:

https://da.live/#/queeek/eds-micro-frontends