ÃÛ¶¹ÊÓƵ

Edge Delivery Services and Universal Editor developer tutorial

Edge Delivery Services and Universal Editor developer tutorial

In this tutorial, you’ll learn the fundamentals of building an AEM website that combines powerful authoring with Universal Editor and lightning-fast delivery using Edge Delivery Services. By the end, you’ll have basic understanding of how to create a new project, set up a local development environment, and build a new block.

Project setup

Learn how to create a code project and configure a new site in AEM as a Cloud Service. This setup enables seamless development with the Universal Editor for content creation and fast content delivery through Edge Delivery Services.

Create a code project

Create a code project

Create a code project for Edge Delivery Services, editable using the Universal Editor.

Learn more

Create an AEM site

Create an AEM site

Create a site in AEM Sites for Edge Delivery Services, editable using the Universal Editor.

Learn more

Development setup

Learn how to configure your local development environment to enable fast website development. This setup allows for seamless site creation with the Universal Editor and efficient content delivery through Edge Delivery Services, ensuring a smooth and optimized development workflow.

Set up a local development environment

Set up a local development environment

Set up a local development environment for sites delivered with Edge Delivery Services and editable with Universal Editor.

Learn more

Add website branding

Add website branding

Define global CSS, CSS variables and web fonts for an Edge Delivery Services site.

Learn more

Block development

Learn how to create a new block by defining its content model and setting up sample content for testing and development. Explore two methods for rendering the block and understand how to structure it for optimal performance and flexibility in AEM and Edge Delivery Services.

Create a block

Create a block

Build a block for an Edge Delivery Services website that is editable with Universal Editor.

Learn more

Author a block

Author a block

Author a Edge Delivery Services block with Universal Editor.

Learn more

Develop a block with CSS

Develop a block with CSS

Develop a block with CSS for Edge Delivery Services, editable using the Universal Editor.

Learn more

Develop a block with CSS and JS

Develop a block with CSS and JS

Develop a block with CSS and JavaScript for Edge Delivery Services, editable using the Universal Editor.

Learn more

Next steps

Now that you’ve completed this tutorial, build on what you’ve learned with these focused how-tos. These guides expand on the code and concepts covered here, exploring role-specific use cases, advanced techniques, and additional tips to enhance Edge Delivery Services and Universal Editor development skills.

Block options

Block options

Learn how to build a block with multiple display options.

Learn more

Header and Footer

Header and Footer

Learn how header and footers are used in Edge Delivery Services and Universal Editor.

Learn more

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d