Developer Tutorial

This is a condensed walkthrough of Adobe's official Edge Delivery Services (EDS) tutorial, which takes a project from an empty template to a published, live page.

1. Scaffold a project

Start from the aem-boilerplate GitHub template: click Use this template to create your own public repository. Then install the AEM Code Sync GitHub App on that repository, which is what lets Edge Delivery Services fetch and render your code and content on every push.

Once code sync is installed, your site is reachable at:

https://<branch>--<repo>--<owner>.aem.page/

2. Set up local development

Install the AEM CLI and clone your new repository:

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>
cd <repo>
aem up

aem up starts a local proxy at http://localhost:3000 that serves your local code merged with previewed content, with live reload on save.

3. Author content

Content lives in Document Authoring at da.live. Open or create a document there, edit it like a regular document, then use the Preview and Publish actions (also available through the Sidekick browser extension) to push it to the .aem.page preview environment or the .aem.live production environment.

4. Build a block

Blocks live under /blocks/<name> as a pair of <name>.js and <name>.css files. The JS file exports a default decorate(block) function that receives the block's DOM element and transforms its authored markup into the final rendered structure. Edits to the CSS and JS are picked up immediately by the local dev server.

5. Publish

Commit and push your changes; Code Sync automatically updates the preview environment for your branch. Once verified, merge to main to promote the change to the .aem.live production environment.

Read the full tutorial at aem.live/developer/tutorial.