Set up AEM Edge Functions on Edge Delivery Services
Learn how to set up AEM Edge Functions on an Edge Delivery Services site.
This tutorial covers Edge Delivery site onboarding in Cloud Manager, CLI installation, project setup from the boilerplate template, CDN configuration, and deployment of a working endpoint.
This tutorial uses the Frescopa Site Project as the demo site. You can follow the same steps with your own Edge Delivery Services site.
What you’ll build
AEM Edge Functions are JavaScript modules that run on Adobe CDN at the edge, not on your Edge Delivery origin. You deploy one AEM Edge Function named my-edge-function with two routes:
/hello-worldreturns a greeting from the edge/weatherdetects the visitor’s location at the edge, calls the Open-Meteo API, and returns the current temperature for their city
During development, you test your AEM Edge Function locally with the dev server. Then you deploy edgeFunctions.yaml and cdn.yaml through the Edge Delivery configuration pipeline, push the AEM Edge Function (JavaScript module) to Adobe CDN, and verify both endpoints on your site domain (for example, https://myfrescopa.enablementadobe.com/hello-world).
The high-level steps:
- Onboard your Edge Delivery site to Cloud Manager
- Install Adobe CLI and AEM Edge Functions plugin
- Set up AEM Edge Functions on Edge Delivery Services
- Create the AEM Edge Functions project from the boilerplate template
- Clone, review, and run the AEM Edge Functions project locally
- Review, manage, and deploy CDN configuration
- Build and deploy AEM Edge Functions to Adobe CDN
- Verify the endpoint is working
Prerequisites
Ensure the following are in place before starting.
- Node.js and npm installed locally
- A GitHub account to create a project from the boilerplate template
- An Edge Delivery Services add-on for your Cloud Manager program
- Deployment Manager role in Cloud Manager
- The Frescopa Site Project or your own Edge Delivery site project
Step 1: Onboard your Edge Delivery site to Cloud Manager
Before you set up AEM Edge Functions, onboard your Edge Delivery site in Cloud Manager. This step uses Cloud Manager only and does not require the Adobe CLI.
If your site is already onboarded, verify it appears in Cloud Manager and skip to Step 2.
The following steps use the Frescopa Site Project as the demo site.
-
Log in to Cloud Manager and open your program with an Edge Delivery Services add-on. On the program overview, confirm the Edge Delivery tab is visible.
-
On the Edge Delivery tab, complete the Edge Delivery to-do list. Key steps include:
-
Add Edge Delivery site:
- Site name:
Frescopa - Edge Delivery origin:
https://main--frescopa--sachinmali.aem.live/
The format is
https://<branch>--<site-name>--<organization-name>.aem.live/where<branch>,<site-name>and<organization-name>are the branch, site name and organization name of the Edge Delivery Services site project respectively.Ideally you try to set up the
devbranch of the Edge Delivery Services site project.However, see below screenshot for our demo site.
- Site name:
-
Add domain:
- Domain name:
myfrescopa.enablementadobe.com
You must have a custom domain name set up to deploy the AEM Edge Functions project even if you are trying on dev site mapped to the dev branch of Edge Delivery Services site project.
- Domain name:
-
Add SSL certificate:
- Certificate type: Customer managed (OV/EV)
- Certificate name:
enablementadobe.com - Certificate: The signed certificate file content between
-----BEGIN CERTIFICATE-----and-----END CERTIFICATE----- - Private key: The private key file content between
-----BEGIN PRIVATE KEY-----and-----END PRIVATE KEY----- - Certificate chain: The certificate chain file content between
-----BEGIN CERTIFICATE-----and-----END CERTIFICATE-----
You can use Adobe managed (DV) certificate as well, for tutorial purpose we are using a customer managed (OV/EV) certificate as an example.
-
Add a DNS record in your DNS hosting service for
myfrescopa.enablementadobe.com. -
Map the domain
myfrescopa.enablementadobe.comto the Adobe managed CDN.
-
-
Verify the site appears in the Edge Delivery Sites table. The demo Frescopa site is reachable at https://myfrescopa.enablementadobe.com/.
For a complete walkthrough, see Add an Edge Delivery site to Cloud Manager.
Step 2: Install CLI and plugins
Install or update the Adobe aio CLI and the AEM Edge Functions plugin.
For a fresh install, run the following commands:
| code language-bash |
|---|
|
Update the Adobe CLI and installed plugins:
| code language-bash |
|---|
|
For example, the successful installation of the CLI and AEM Edge Functions plugin should look like the following:
Step 3: Set up AEM Edge Functions
The AEM Edge Functions must be set up on the Edge Delivery Services site domain. It allows you to deploy code and config files to Adobe CDN so you can invoke the routes supported by AEM Edge Functions from JavaScript code in your site.
To set up AEM Edge Functions, run the following command:
$ aio aem edge-functions setup
If you are not already logged in to Adobe IMS, the command triggers login flow. The setup process prompts for program, site type, Edge Delivery site, and ADC project config details. Select Edge Delivery Services as the site type. The setup details are stored in the .aio file, it provides the context for the AEM Edge Functions CLI commands hereafter.
Note that setup associates the Frescopa Edge Delivery site with the domain myfrescopa.enablementadobe.com.
Use the following command to review the AEM Edge Functions setup details:
$ aio aem edge-functions info
The output should look like the following:
Step 4: Create AEM Edge Functions project
Create the AEM Edge Functions project from the aem-edge-functions-boilerplate GitHub template. The boilerplate includes the files and configuration you need to get started.
-
Navigate to aem-edge-functions-boilerplate on GitHub.
-
In the top-right corner, select Use this template > Create a new repository.
-
Provide the repository name (for example,
frescopa-edge-functions), add a description, set visibility to Private, and select Create repository.
Step 5: Clone, review, and run AEM Edge Functions project
Clone the AEM Edge Functions project
Clone the repository you created in Step 4, then open it alongside the Frescopa (or your own) Edge Delivery site project in your IDE. Most editors support workspaces or multi-root views that let you work in both projects at the same time.
# Clone the repository
$ git clone https://github.com/<your-org>/<your-project-name>.git
For example, see the Frescopa Edge Delivery site project and Frescopa AEM Edge Functions project as workspace in IDE:
Review the AEM Edge Functions project
Before making changes or deploying the AEM Edge Functions project, review the key files that define the AEM Edge Functions contract.
-
package.jsoncontains the project dependencies. Note the@fastly/js-computedependency. For more information, see JavaScript on the Compute platform. -
src/index.jsis the function entry point and contains the main logic for the project. It uses Fastly Compute’saddEventListener("fetch", ...)pattern. All incoming requests flow through thehandleRequestfunction, where you add route matching logic. For example, the following code is from the boilerplate:code language-js // src/index.js addEventListener("fetch", (event) => event.respondWith(handleRequest(event))); async function handleRequest(event) { const req = event.request; const url = new URL(req.url); let finalResponse; try { // Route matching logic if (url.pathname === "/" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/hello-world" && req.method === "GET") { finalResponse = new Response("Hello World from the edge!", { status: 200 }); } else if (url.pathname === "/weather" && req.method === "GET") { finalResponse = await weatherHandler(req, event.client); } else { finalResponse = response.notFound(); } } catch (err) { finalResponse = new Response("Internal Server Error", { status: 500 }); } return finalResponse; }A single AEM Edge Function can handle multiple routes through the
ifstatements inhandleRequest. -
fastly.tomlconfigures the local development server. For more information, see the Fastly.toml reference. -
config/contains the config files for the AEM Edge Function service and CDN routing rules. Deploy these files through the Edge Delivery configuration pipeline in Cloud Manager. Step 6 covers that process.
Review the remaining project files such as test/, src/lib/, and README.md to understand the full setup.
Run the AEM Edge Functions project locally
To iterate quickly, you can run the AEM Edge Functions project locally. From the AEM Edge Functions project directory, install dependencies and start the local development server:
# Navigate to the project directory (replace with your project name)
$ cd frescopa-edge-functions
# Install dependencies
$ npm install
# Start the local development server
$ aio aem edge-functions serve
The server starts at http://127.0.0.1:7676.
For example, the output should look like the following screenshot:
Step 6: Review and deploy CDN configuration
The AEM Edge Functions project includes CDN configuration files. Review them and deploy using the Edge Delivery configuration pipeline in Cloud Manager.
Review CDN configuration
Review the CDN configuration files in the config/ directory of the AEM Edge Functions project.
config/edgeFunctions.yamldeclares the AEM Edge Function service. For example:
kind: "EdgeFunctions"
version: "1"
data:
functions:
- name: my-edge-function
For more information on supported properties, see edgeFunctions.yaml reference.
config/cdn.yamldeclares the CDN routing rules that direct traffic to the AEM Edge Function service. For example:
kind: 'CDN'
version: '1'
data:
originSelectors:
rules:
- name: route-weather-to-edge-function
when: { reqProperty: path, equals: "/weather" }
action:
type: selectAemOrigin
originName: edgefunction-my-edge-function
skipCache: true
- name: route-hello-world-to-edge-function
when: { reqProperty: path, equals: "/hello-world" }
action:
type: selectAemOrigin
originName: edgefunction-my-edge-function
skipCache: true
Key call outs:
- The
originNamemust follow the patternedgefunction-<edge-function-name>, where<edge-function-name>is the name of the AEM Edge Function declared inedgeFunctions.yaml. - The
typemust beselectAemOrigin. - The
skipCacheis set totrueto bypass the CDN cache for the request.
For more information, see Origin selectors.
Manage CDN configuration
Deploy CDN configuration through the Cloud Manager configuration pipeline. First, make the config/ files from your AEM Edge Functions project available to Cloud Manager. You have two options:
-
Adobe repository: Create a new repository in Cloud Manager for your program.
-
Private repository: Link your existing GitHub repository to Cloud Manager.
This tutorial uses the Frescopa AEM Edge Functions project from Step 4 as a private repository.
-
In Cloud Manager, open Repositories and select Add Repository.
-
In the Add Repository dialog, select Private Repository, then provide the repository name, URL, and type. Select Save.
-
Complete the steps in the Private Repository Ownership Validation dialog.
-
Grant Cloud Manager access to the repository:
-
Store the validation secret in your AEM Edge Functions project repository:
-
After validation completes, the private repository appears in the Repositories table.
Deploy CDN configuration
Create and run an Edge Delivery configuration pipeline in Cloud Manager.
-
On the program overview page, open the Edge Delivery tab. Under Pipelines, select Add Edge Delivery Pipeline.
-
In the Add Edge Delivery Pipeline dialog, provide a name and select Continue.
-
On the Source Code step, select the private repository you added, the
mainbranch, and/configas the code location. Select Save.
-
Run the pipeline by selecting … next to the pipeline name, then Run.
The successful run deploys the edgeFunctions.yaml and cdn.yaml files to the Edge Delivery site domain.
Verify the CDN configuration was deployed successfully:
$ aio aem edge-functions list
The output should list my-edge-function (or whatever name you declared in edgeFunctions.yaml).
Step 7: Build and deploy AEM Edge Functions project
Build and deploy the AEM Edge Functions project using following commands, the commands use the context stored in the .aio file.
# Navigate to the AEM Edge Functions project directory (replace with your project name)
$ cd frescopa-edge-functions
# Review to make sure you are deploying to the correct Edge Delivery Services site
$ aio aem edge-functions info
# Build the project
$ aio aem edge-functions build
# Deploy to Adobe CDN
$ aio aem edge-functions deploy my-edge-function
The name passed to deploy must match the name declared in config/edgeFunctions.yaml. Also you must be part of the Cloud Manager Deployment Manager product profile.
For example, the output should look like the following screenshot:
Step 8: Verify the endpoint
Verify the deployed endpoints in a browser or with curl:
$ curl https://myfrescopa.enablementadobe.com/hello-world
$ curl https://myfrescopa.enablementadobe.com/weather
Replace the domain with your Edge Delivery site domain from Step 1.
For example, the responses look like the following screenshot:
edgefunction-pXXXXX-dYYYYY-<edge-function-name>.adobeaemcloud.com domain is available for debugging only and is not guaranteed to be stable. In production, requests reach the AEM Edge Function through your site’s custom domain via the CDN routing rules in cdn.yaml.In real-world scenarios, use AEM Edge Functions for server-side logic at the CDN and call them from your site’s block JavaScript. See the AEM Edge Functions product documentation for advanced configuration.
Summary
You onboarded the Frescopa Edge Delivery site to Cloud Manager, installed the CLI, set up AEM Edge Functions on Edge Delivery Services, created and ran the project locally, deployed CDN configuration, built and deployed the AEM Edge Function, and verified the endpoint.