Local AEM Development with the Universal Editor local-dev-ue

Learn how the Universal Editor supports editing on local AEM instances for development purposes.

Overview overview

The Universal Editor Service is what binds the Universal Editor and the backend system. To be able to develop locally for the Universal Editor, you must run a local copy of the Universal Editor Service. This is because:

This document explains how to run AEM in HTTPS alongside a local copy of the Universal Editor Service so you can develop locally on AEM for use with the Universal Editor.

Set Up AEM to Run on HTTPS aem-https

Within an outer frame secured with HTTPS an unsecure HTTP frame cannot be loaded. The Universal Editor Service runs on HTTPS and therefore AEM or any other remote page must run also on HTTPS.

To do this, you need to set up AEM to run on HTTPS. For development purposes you can use self-signed certificate.

See this document on how to set up AEM running on HTTPS including a self-signed certificate you can use.

Install the Universal Editor Service install-ue-service

The Universal Editor Service is not an entire copy of the Universal Editor, but only a subset of its features to ensure that calls from your local AEM environment are not routed over the internet, but from a defined endpoint you control.

NodeJS version 20 is required to run a local copy of the Universal Editor Service.

The Universal Editor Service is available via Software Distribution. Please see the Software Distribution documentation for details on how to access it.

Save the universal-editor-service.cjs file from Software Distribution to your local development environment.

Create a Certificate to Run the Universal Editor Service with HTTPS ue-https

The Universal Editor Service also requires a certificate to run on HTTPS in your development environment.

Run the following command.

$ openssl req -newkey rsa:2048 -nodes -keyout key.pem -x509 -days 365 -out certificate.pem

The command generates a key.pem and a certificate.pem file. Save these files to the same path as your universal-editor-service.cjs file.

Setting up the Universal Editor Service Configuration setting-up-service

A number of environment variables must be set in NodeJS to run the Universal Editor Service locally.

On the same path as your universal-editor-service.cjs, key.pem and certificate.pem files, create an .env file with the following content.

UES_PORT=8000
UES_PRIVATE_KEY=./key.pem
UES_CERT=./certificate.pem
UES_TLS_REJECT_UNAUTHORIZED=false

These are the minimum values required for local development in our example. The following table details these and additional values available.

Running the Universal Editor Service running-ue

To start the Universal Editor Service, execute the following command:

$ node ./universal-editor-service.cjs

It should output the following to your terminal:

Universal Editor Service listening on port 8000 as HTTPS Server

Ensure the service starts HTTPS Server not HTTP Server.

Using the Local Universal Editor Service Instead of the Global Service using-local-ue

The Universal Editor knows which Universal Editor Service to use to edit a page based on how the page is instrumented. This is done via meta tags in the page loaded in the Universal Editor.

For a page to be edited using your local Universal Editor Service, the following meta tag must be set:

<meta name="urn:adobe:aue:config:service" content="https://localhost:8000">

Once set, you should see every content update call go to https://localhost:8000 instead of the default Universal Editor Service.

Editing a Page with the Local Universal Editor Service editing

With the Universal Editor Service running locally and your content page instrumented to use the local service, you can now start the editor.