DocumentationAEM as a Cloud ServiceUser Guide

AEM Authoring with Edge Delivery Services edge-dev-getting-started

Last update: Tue Feb 27 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

This guide will get you up-and-running with a new Adobe Experience Manager site using Edge Delivery Services and the Universal Editor for content authoring.

EARLY-ACCESS TECHNOLOGY - Ask us about this feature from the AEM Sites labs on your Slack channel!
AEM authoring with Edge Delivery Services is an early-access technology.

Prerequisites prerequisites

Before beginning this guide, you should already be familiar with the basics of and have access to Edge Delivery Services including:

Pick the Right Editor editor-choice

AEM offers two different content editors and the choice of which to use depends on your situation.

  • Universal Editor - This should be the default choice for new sites.
  • AEM Page Editor - This should be chosen for an existing AEM Sites migration to Edge Delivery Services.

This guide focuses on AEM projects on Edge Delivery Services using the Universal Editor. See the document Developing for Edge Delivery Services for more details on choosing the right editor and the migration of existing AEM sites to Edge Delivery Services.

Getting Started with AEM Authoring nd Edge Delivery Services getting-started

Once you have fulfilled the prerequisites and have made the choice to use the Universal Editor, you can get started on your own project.

Create Your GitHub Project create-github-project

First you will need to create a new project on GitHub, based on the Adobe template.

  1. Navigate to https://github.com/adobe-rnd/aem-boilerplate-xwalk and Click on Use this template and select Create a new repository.

    • You will need to be signed in to GitHub to see this option.

    Copy repository project

  2. By default, the repository will be assigned to you. Change this as necessary as well as provide a repository name and description and click Create repository.

    Creating the repository

  3. In a new tab in the same browser, navigate to https://github.com/apps/aem-code-sync and click Configure.

    Code Sync

  4. Click Configure for the org where you created your new repository in the previous step.

    Choosing the org for code sync

  5. On the AEM Code Sync GitHub page under Repository access, select Only select repositories, select the repository that you created in the previous step, and then click Save.

    Granting AEM Code Sync access

  6. Once AEM Code Sync is installed, you receive a confirmation screen. Return to the browser tab of your new repository.

    Code Sync installation confirmation

  7. Click the fstab.yaml file to open it and then the Edit this file icon to edit it.

    fstab.yaml

  8. Edit the fstab.yaml file to update the mount point of your project. Replace the default Google Docs URL with the URL of your AEM as a Cloud Service authoring instance and then click Commit changes….

    • https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
    • Changing the mount point tells Edge Delivery Services where to find the content of the site.

    Updating fstab

  9. Add a commit message as desired and then click Commit changes, committing them directly to the main branch.

    Committing changes

  10. Return to the root of your repository and click on paths.yaml and then the Edit this file icon.

    paths.yaml

  11. Replace the default mappings with /content/<site-name>/:/ and click Commit changes….

    • Provide your own <site-name>. You will need it in a later step.
    • The mappings tells Edge Delivery Services how to map the content in your AEM repository to the site URL.

    Updating paths.yaml

  12. Add a commit message as desired and then click Commit changes, committing them directly to the main branch.

    Committing changes

Create and Edit a New AEM Site create-aem-site

Now that you have a GitHub project, you must create a new AEM site that the project can use.

NOTE
To edit your site using the Universal Editor, you must use a Chromium-based browser.

  1. Request the latest AEM Authoring with Edge Delivery Services site template from Adobe Engineering via your project Slack channel.

  2. Sign in to your AEM as a Cloud Service authoring instance and navigate to the Sites console and tap or click Create -> Site from template.

    Create a new site from the console

  3. On the Select a site template tab of the create site wizard, click the Import button to import a new template.

    Importing templates

  4. Upload the AEM Authoring with Edge Delivery Services site template provided to you by Adobe Engineering.

  5. Once the template is imported, it appears in the wizard. Tap or click to select it and then tap or click Next.

    Select template

  6. Provide the following fields and tap or click Create.

    • Site title - Add a descriptive title for the site.
    • Site title - Use the <site-name> that you defined in the previous step.
    • GitHub URL - Use the URL of the GitHub project you created in the previous step.

    Site details

  7. AEM confirms the site creation with a dialog. Tap or click OK to dismiss.

    Site creation confirmation

  8. On the sites console, navigate to the index.html of the newly-created site and tap or click Edit in the toolbar.

    Editing the new site

  9. The Universal Editor opens in a new tab. You may need to tap or click Sign in with Adobe to authenticate to edit your page.

    Universal Editor

You can now edit your site using the Universal Editor. See the Universal Editor documentation for more information.

Publishing Your New Site publishing

Once you are finished editing your new site using the Universal Editor, you can publish your content.

  1. On the sites console, select all of the pages you created for your new site and tap or click Quick publish in the toolbar.

    Selecting pages to publish

  2. Tap or click Publish in the confirmation dialog to start the process.

    Publish dialog

  3. Open a new tab in the same browser and navigate to the URL of your new site.

    • https://main--<site-name>--<owner>.hlx.page

  4. See your content published.

    Published content

Next Steps next-steps

Now that you have a working AEM wuthoring with Edge Delivery Services project, you can begin creating and styling your own blocks.

Please see the guide Creating Blocks Instrumented for use with the Universal Editor for more information.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab