Build a dynamic Edge Delivery Services block with an AEM Edge Function

Learn how to call an AEM Edge Function from an Edge Delivery Services block so the block can fetch dynamic data from a third-party API.

Edge Delivery Services is built for speed. It generates semantic HTML documents as part of publication, with no server-side logic on the page itself, so a block cannot fetch dynamic data, such as inventory or pricing from a third-party system, on its own. Fetching it directly from the browser is an alternative, but the browser may not have a user session to authenticate with, and any API token placed in client-side code is public.

An AEM Edge Function solves this problem. It runs on Adobe CDN, holds the credentials, calls the third-party API on the block’s behalf, and returns only the data the block needs.

The logical flow looks like this:

Browser (block) → AEM Edge Function (holds credentials) → Third-party API

What you’ll build

In this tutorial, you build an end-to-end flow that connects an Edge Delivery Services block to an AEM Edge Function endpoint, which calls a third-party API and returns dynamic data to the block.

For demo purposes, the Frescopa Site Project is used as the Edge Delivery Services site. You develop an Estimated Delivery Checker block that calls an AEM Edge Function to check product availability and delivery timing. The block is authored in Universal Editor, and the AEM Edge Function endpoint is developed in a separate project. The block calls the endpoint, which calls two upstream APIs (simulated in this tutorial) and returns a combined response to the block.

You can follow the same steps for dynamic data needs in your own Edge Delivery Services site, swapping in your own block and AEM Edge Function code.

The high-level steps are:

Prerequisites

To complete this tutorial, make sure you have completed the following:

Local dev vs deployed

Before developing, it’s important to understand the differences between local dev and a deployed environment. The following table summarizes the differences:

CORS handling

Let’s look at the CORS handling differences between local dev and a deployed environment.

You implement the CORS headers in the AEM Edge Function handler. The block’s JavaScript then picks the relative or absolute path depending on the environment.

Reference implementation

A complete, working example backs every step in this tutorial. Use the diffs below to check your own implementation against it, or to jump straight to the code without following each step.

Next steps

Start with Develop the AEM Edge Function, since the Edge Delivery Services block needs an endpoint to call before it has anything to connect to.

Additional resources