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:
- Adobe’s official Universal Editor Service is hosted globally, and your local AEM instance would need to be exposed to the internet.
- While developing with a local AEM SDK, Adobe’s Universal Editor Service can not be accessed from the internet.
- If your AEM instance has IP restrictions and Adobe’s Universal Editor Service isn’t in a defined IP range, you can host it yourself.
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.
UES_PORT
8080
UES_PRIVATE_KEY
UES_CERT
UES_TLS_REJECT_UNAUTHORIZED
true
UES_DISABLE_IMS_VALIDATION
false
UES_ENDPOINT_MAPPING
Example:
UES_ENDPOINT_MAPPING='[{"https://your-public-facing-author-domain.net": "http://10.0.0.1:4502"}]'
Result: Universal Editor Service will connect to
http://10.0.0.1:4502
instead of the provided connection https://your-public-facing-author-domain.net
UES_LOG_LEVEL
info
silly
, trace
, debug
, verbose
, info
, log
, warn
, error
, and fatal
UES_SPLUNK_HEC_URL
UES_SPLUNK_TOKEN
UES_SPLUNK_INDEX
UES_SPLUNK_SOURCE
universal-editor-service
.env
file. These values will be supported until 1 October 2024 for backwards compatibility.EXPRESS_PORT=8000
EXPRESS_PRIVATE_KEY=./key.pem
EXPRESS_CERT=./certificate.pem
NODE_TLS_REJECT_UNAUTHORIZED=0
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.
https://localhost:8000
results in a 404
error. This is expected behavior.https://localhost:8000/corslib/LATEST
. See the next section for details.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.
- Open your browser to
https://localhost:8000/corslib/LATEST
. - Direct your browser to accept your self-signed certificate.
- Once the self-signed certificate is trusted, you can edit the page using your local Universal Editor Service.