Experience Manager Guides and Edge Delivery Services (Beta)

Open the Experience Manager Guides boilerplate template repository aem-guides-boilerplate.

Create a new repository using this template. Learn about Creating a repository from a template. Ensure that the repository visibility is set to Public so it can be accessed by EDS.

Navigate to the AEM Code Sync page and select Install.

AEM Code Sync monitors repository changes and ensures that updates are correctly pushed to GitHub.

On the next page, grant access to the repository you created. To do this, select the Only select repositories option and then select your repository from the dropdown.

{width="350"}

Select Install and Authorize.

On GitHub, navigate to the left sidebar and select Developer settings.

In the left sidebar, select GitHub Apps.

Select New GitHub App.

{width="650"}

On the Register new GitHub App page, provide the following details:

• GitHub App name: Enter a name for your app. For example, USERNAME-eds-app where USERNAME is your GitHub username.

• Homepage URL: Enter the URL to the Experience Manager Guides instance.

  Sample URL (format): https://<aem-author-url>/libs/fmdita/clientlibs/xmleditor/page.html

  Sample URL: https://author-p16602-e335172-cmstg.adobeaemcloud.com/libs/fmdita/clientlibs/xmleditor/page.html

• Callback URL: Same as the Homepage URL.

• Webhook URL: Disable this option.

• Repository permissions: Set Read and Write permissions for Actions, Administration, and Attestation.

Select Create GitHub App.

On GitHub, navigate to the left sidebar and select Developer settings.

In the left sidebar, select OAuth Apps.

Select New OAuth App.

{width="650"}

Register your application by providing the following mandatory details:

• Application name: Enter the name of your EDS repository
• Homepage URL: Enter the URL to the Experience Manager Guides instance. (For sample URL format, refer to step 4 of Create a new GitHub App section).
• Authorization callback URL: Same as Homepage URL

Select the Enable Device Flow option and then select Register application to complete the registration.

{width="650"}

Open the fstab.yaml file in your repository and update the following:

• your-user-name
• your-repo-name

{width="650"}

Select Commit changes, enter commit details, and confirm.

Return to Developer settings, locate your app, and select Edit.

{width="650"}

Navigate to the Install App page and select Install.

{width="650"}

Repeat steps 2 and 3 from the Connect GitHub to Adobe via AEM Code Sync section to authorize the repository.

Go to Workspace settings > Publish profiles.

Select the + icon to create a new publish profile and provide the following details:

• Server type: Select GitHub Edge Delivery Services (Beta) from the dropdown.
• Name: Enter a name for this profile .
• Repository name: Use the GitHub repository name created from the boilerplate.
• Username: Enter your GitHub username.
• Branch main: Set to main (default).
• Root folder: Set to docs (default).
• Client ID and Client Secret: Fetch these from your GitHub App (Refer to Create a new OAuth App section for details).

Select Login to authenticate.

{width="650"}

On successful authentication, select Save.

Open your map in Map console.

In the Output presets tab, select + to create a new output preset.

In the New output preset dialog, provide the following details:

• Type: Select Edge Delivery Service (Beta)
• Name: Provide a name for this preset

Select Add.

{width="650"}

Open the newly created EDS (Beta) output preset and navigate to the Config tab.

• Select the publish profile created in the previous step.
• Enable Push to live.

When Push to live is enabled, the generated output is committed to GitHub, and the corresponding updates are propagated to the live website immediately.

{width="650"}

Select Save, and then Generate output.

Go to your GitHub repository and open the blocks folder.

Select the breadcrumbs block.

{width="650"}

Open the css file and update the text color.

Commit the changes to GitHub.

Refresh the live website to view the updates.

Open the topic file and select the text inside a tag element.

In the following screenshot, the content inside the example tag is selected.
{width="650"}

To configure the text inside the example tag:

• Navigate to Content properties.
• Add the outputclass attribute.
• Set its value to example eds-force-block.
• Select Add.
  {width="650"}

Save and regenerate the output.

Create a new folder with the same name as the outputclass inside the blocks directory. Learn about adding files to a repository.

{width="650"}

Add the required css and optional js files.

{width="650"}

Commit changes and regenerate output.