Issue in setting up Universal Editor local service

[narendragandhi]

I am following this article to setup the local universal editor - https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/universal-editor/de... but it's not working for me.

Can you please let me know what steps I could be missing if anyone has it working in their local?

Thanks

Narendra

[kautuk_sahni]

@narendragandhi can you help us explain what issue are you facing? 

Setting up the local Universal Editor in AEM involves several steps:

Prerequisites:

• AEM running on HTTPS: Configure your local AEM instance to use HTTPS. Refer to the AEM documentation for specific instructions.
• Universal Editor Service: Download and install the latest version of the Universal Editor Service from the Adobe Experience League: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/universal-editor/de...

Steps:

1. Create a Certificate:

   • Option 1: Use OpenSSL to generate a self-signed certificate for development purposes only.

     openssl req -x509 -newkey rsa:2048 -keyout key.pem -out certificate.pem -days 365 -subj "/C=US/ST=YourState/L=YourCity/O=YourOrganization/CN=localhost"
     

   • Option 2: Alternatively, for a more secure development environment, use a temporary certificate authority like mkcert: https://github.com/FiloSottile/mkcert

2. Configure the Universal Editor Service:

   • Edit the config.json file located in the Universal Editor Service installation directory.
   • Update the following properties:
     • server.port: Set the port on which the service will run (default: 8000).
     • https.enabled: Set to true to enable HTTPS.
     • https.keyStore: Path to your self-signed certificate keystore file (e.g., key.pem).
     • https.keyStorePassword: Password for the keystore file (leave blank if using OpenSSL).

3. Run the Universal Editor Service:

   • Open a terminal and navigate to the Universal Editor Service installation directory.
   • Run the command ./universal-editor-service to start the service.

4. Instrument your AEM page:

   • Include the Universal Editor core library in your AEM app, referring to the official documentation for specific instructions: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/universal-editor/de...
     • For React apps:

       import "@adobe/universal-editor-cors";
       

     • For non-React apps or server-side rendering:

       <script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST" async></script>
       

   • Use the appropriate API provided by the Universal Editor library to instrument your page for editing. Refer to the Adobe Experience League documentation for detailed instructions: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/universal-editor/de...

5. Access the Local Universal Editor:

   • Open your browser and navigate to https://localhost:8000/.
   • If using a self-signed certificate: Accept the security warning as it's not trusted by default browsers. (For development only)
   • If using a temporary certificate authority like mkcert: You should be able to access the editor without any warnings.
   • You should now be able to edit your AEM page using the local Universal Editor Service.

[PoorvaJa]

Followed your steps @kautuk_sahni. The local universal editor is still not working, getting a 404, when I hit the local host https://localhost:8000/

Here is what I did -
1. Followed the steps as documented here to setup the local Universal editor Service.

2. Added an additional config.json, considering the installation directory didn't have one. Still no luck!
3. Note: Downloaded the Universal editor service universal-editor-service.cjs from https://experience.adobe.com/#/downloads/content/software-distribution/en/aemcloud.html

[maximilianvoss]

That's maybe something we have to improve the documentation. Actually the 404 is correct and the UES is working on your localhost. 
Try https://localhost/corslib/LATEST and you will see you will get the latest universal-editor-cors library.

[PoorvaJa]

Yep, you are right. Was able to see the latest universal-editor-cors library. So, how to use the Universal Editor locally then?

[maximilianvoss · Accepted solution]

Please see: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo...

Universal Editor consists of two elements: UI & Service.

The Universal Editor UI is always hosted on https://experience.adobe.com or under AEM domain.

The Universal Editor Service - the part which is persisting changes to your AEM backend - is either centrally hosted by Adobe at https://universal-editor-service.experiencecloud.live or can be self-hosted by you. Use cases for self-hosting are local development or internal restrictions which prevent direct access to the AEM instance from the Internet.

[PoorvaJa]

Oh, perfect. So it was working after all. I was expecting to see a UI for the local Universal Editor Service as well.

[vishal22]

Hi @PoorvaJa @narendragandhi ,
So, you means we are not able to see universal editor ui on local.
For your reference i have followed all steps mentioned in documentation but i am not able to instrument page for

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

 I am able to view page in AEM

and not able to open that in universal editor, universal editor service is running on local.

[maximilianvoss]

The UI is not running under AEM domain for localhost, this is only available for Cloud Service instances.

Instead of:

https://localhost:8443/ui#/aem/universal-editor-canvas/

you have to use

https://experience.adobe.com/#/aem/editor/canvas/

Best,

Max

[hetbv]

Hello,

can you provide more details on step 4 of your answer on adding the instrument to your AEM page? how do we add a meta tag to that?

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

I am also following the same article.

[SatyanarayanaTh]

For react Apps to enable AUE on the pages:

add the fallowing dependency in package.json  dependency section 

"@adobe/universal-editor-cors": "^2.2.16",

then add the fallowing import in index.js 

import '@adobe/universal-editor-cors';

then instrumentalise the page as mentioned the Here