EDS Environment Setup

Activity: Create git repository for an EDS Site

While logged into GitHub, visit https://github.com/adobe-rnd/aem-boilerplate-xwalk

Click Use this as a template, then choose Create a new repository

Verify the owner is set to your account.

Choose a repository name.

Leave visibility as public.

Click Create repository

You will be taken to the newly created repository.

Look for the fstab.yaml file in the repo. Click it.

Click the Edit this file pencil icon.

It will have a pre-filled URL from the boilerplate template, like this:

https://author-p130360-e1272151.adobeaemcloud.com/bin/franklin.delivery/adobe-rnd/aem-boilerplate-xwalk/main

Edit 3 parts of the URL:

https://author-p188902-e1969281.adobeaemcloud.com/bin/franklin.delivery/your-github/eds-repo/main

Verify the changes. Click Commit changes... when done. Verify the commit message and then click Commit Changes.

End of activity

Activity: Set up AEM Code Sync

While logged into GitHub, go to: https://github.com/apps/aem-code-sync

Click Configure

Under Repository Access, choose Only select repositories, then choose the repository you created in the previous activity.

Click Save.

You will be redirected to a page under https://tools.aem.live to finish the setup.

Under Code source, verify the GitHub repo URL matches your repo. Click Next.

Under Content Source, verify:

Click Next

Under Site Users, verify that the email address associated with your GitHub account is listed as admin. This email should also have a valid Adobe account.

If it is not, click Add User, and enter the email address associated with your GitHub account and Adobe account.
Make sure Admin is checked for role.

Click Next

Verify the URLs and email address listed in the Summary.

Click Save.

You will see a confirmation page with a “Your site is ready” message.

There will be links to your EDS sites similar to:

These are where your site will be deployed. Clicking the links now should give a 404 page.

End of activity

Activity: Set up AEM Author for EDS

Go to your AEM Author service https://author-p188902-e1969281.adobeaemcloud.com. Go to the Sites console.

Click the blue Create button, then click Site from template.

Click AEM Site with Edge Delivery Services Template 0.2.0, then Next in the top right.

Enter a Site title for the new EDS Site.

Enter a Site name. It does not have to match the Title, but keep it to lowercase letters and dashes.

For Project URL, enter the https://main--<site>--ercot-centrla.aem.live URL that was created after running AEM Code Sync.

Click Create in the top right of the page. A modal will appear to confirm the creation job.

In the root of the Sites console, there should now be a top-level page with the Title and Name you entered. It will have 3 pages under it:

If it doesn’t appear immediately, refresh the browser.

AEM Author EDS Configuration

Click the AEM Logo, then click the Tools menu (Hammer icon).

Go to Cloud Services, then look for Edge Delivery Services Configuration. Click that.

A top-level entry will have the site name you chose. Navigate under it to see your EDS configuration.
Select it, then click Properties on the action bar.

Go to the Authentication tab. There will be a “technical account ID” field filled with an email address.

It will have a series of characters followed by @techacct.adobe.com. Copy the address.

Create a new browser tab. Go to https://tools.aem.live/tools/site-admin/index.html

For organization, make sure it matches your GitHub account. Click List below.

A list of EDS sites under this account will appear.

Look for the card matching the site you created earlier, then click the three-dot menu in the top right. Then click Manage Users.

Click Add Users.

Paste the @techacct.adobe.com email from AEM Author. Then make sure Config Admin is selected. Click Add 1 User.

Go back to the AEM Author browser tab. If still on the EDS Config properties, click Cancel.

Navigate back to the Sites Console. Navigate to the EDS site you created.

Select Index, Header, and Footer. Click Quick Publish in the Properties tab.

Bring up a new browser tab and visit your https://main--eds-name--ercot-central.aem.live link. You should see the sample page instead of a 404.

End of activity

Activity: Local Dev Setup

Go to the GitHub repository of your EDS project. Click the green Code button.

Choose an option to clone your repository.

Choose a local directory on your computer, and then run git clone with the chosen method:

git clone https://github.com/ercot-central/www-site.git

Once done, cd into the newly created folder.

cd www-site

Due to the ERCOT environment constraints, you will be using a specific branch as your starting point. These branches have been given your name to isolate the work.

Check out the branch with your name

git checkout yourname

Now install the Node.js dependencies with npm:

npm install

Install the AEM CLI tools

npm install @adobe/aem-cli

Once done, run the dev server with

npx aem up

A browser tab should open at http://localhost:3000, showing the content of the index page that was created on your AEM Author instance.

This will load content from the main www-site EDS site, but serve styles & scripts from your local repo branch.

To use content from your training specific AEM Author EDS Site, use Ctrl+C to quit the aem server, then run the command with the url parameter:

npx aem up --url https://main--eds-name--ercot-central.aem.page

This will now force the local dev server to use content you author under the Sites console at eds-name. Refresh the http://localhost:3000 page if necessary.

Open the www-site folder in your editor if you have not already done so.

End of activity

Activity: Edit a page to preview locally

Go to your AEM Author service.

Navigate to the Site console and your EDS site eds-name.

Select Index under your site root and then click Edit on the Action bar.

When the Universal Editor opens the page, make some text changes.

After making the changes, click the blue Publish button.

Make sure Live is checked, then click Publish.

Now go to your EDS site URL, https://main--eds-name--ercot-central.aem.live. Refresh to see your changes.

Go to http://localhost:3000 and refresh to see the content changes through the dev server as well.

Make another change in the Universal Editor, but when publishing, choose Preview as the destination.

This time, check your preview URL, ending with .page, for example https://main--eds-name--ercot-centrla.aem.page.

Now check your local dev server http://localhost:3000 and notice it shows the Preview content.

End of activity

adobe-rnd/aem-boilerplate-xwalk: Use this repository template for new AEM XWalk projects.

GitHub Apps - AEM Code Sync

Set Up AEM Sites as a Content Source