1.1.2 Setup your AEM CS environment

1.1.2.1 Setup your GitHub repo

Go to https://github.com. Click Sign In.

Enter your credentials. Click Sign In.

Once signed in, you’ll see your GitHub Dashboard.

Go to https://github.com/adobe-rnd/aem-boilerplate-xcom. You’ll then see this. Click Use this template and then click Create a new repository.

For the Repository name, use citisignal-aem-accs. Set the visibility to Private. Click Create repository.

After a couple of seconds, you’ll then have your repository created.

Next, go to https://github.com/apps/aem-code-sync. Click Install or Configure.

Click the Continue button next to your GitHub user account.

Click Configure next to your GitHub user account.

Click Only select repositories and then add the repository that you just created.

Scroll down and cliclk Save.

You’ll then get this confirmation.

1.1.2.2 Update file fstab.yaml

In your GitHub repo, click to open the file fstab.yaml.

Click the edit icon.

You now need to update the value for the field url on line 3.

You need to replace the current value by the URL of your specific AEM Sites CS environment in combination with the settings of your GitHub repo.

This is the current value of the URL: https://author-p130360-e1272151.adobeaemcloud.com/bin/franklin.delivery/adobe-rnd/aem-boilerplate-xcom/main.

There are 3 parts of the URL that need to be updated

https://XXX/bin/franklin.delivery/YYY/ZZZ/main

XXX should be replaced by the URL of your AEM CS Author environment.

YYY should be replaced by your GitHub user account.

ZZZ should be replaced by the name of the GitHub repository that you used in the previous exercise.

You can find the URL of your AEM CS Author environment by going to https://my.cloudmanager.adobe.com. Click your Program to open it.

Next, click the 3 dots … on the Environments tab and click View Details.

You’ll then see your environment details, including the URL of your Author environment. Copy the URL.

XXX = author-p166717-e1786231.adobeaemcloud.com

For the GitHub user account name, you can easily find that in the URL of your browser. In this example, the user account name is woutervangeluwe.

YYY = woutervangeluwe

For the GitHub repository name, you can also find it in the browser window that you have open in GitHub. In this case, the repository name is citisignal.

ZZZ = citisignal-aem-accs

These 3 values combined, lead to this new URL that needs to be configured in the file fstab.yaml.

https://author-p166717-e1786231.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal-aem-accs/main

Click Commit changes….

Click Commit changes.

The file fstab.yaml has now been updated.

1.1.2.3 Upload CitiSignal assets & site

Go to https://my.cloudmanager.adobe.com. Click your Program to open it.

Next, click the URL of your Author environment.

Click Sign in with Adobe.

You’ll then see your Author environment.

Your URL will look like this: https://author-p166717-e1786231.adobeaemcloud.com/ui#/aem/aem/start.html?appId=aemshell

You now need to access the CRX Package Manager environment of AEM. To do that, remove ui#/aem/aem/start.html?appId=aemshell from the URL and replace it by crx/packmgr, which means your URL should look like this now:
https://author-p166717-e1786231.adobeaemcloud.com/crx/packmgr.
Hit Enter to load the package manager environment

Next, click Upload package.

Click Browse to locate the package to upload.

The package to upload is called citisignal-assets.zip and can be downloaded here: https://one-adobe-tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal_aem_accs.zip.

Select the package citisignal_aem_accs.zip and click Open.

Next, click OK.

The package will then be uploaded. Next, click Install on the package you just uploaded.

Click Install.

After a couple of minutes, your package will then be installed.

You can now close this window.

1.1.2.4 Publish CitiSignal assets

Go to https://my.cloudmanager.adobe.com. Click your Program to open it.

Next, click the URL of your Author environment.

Click Sign in with Adobe.

You’ll then see your Author environment. Click Assets.

Click Files.

Click to select the folder CitiSignal and then click Manage Publication.

Click Next.

Click Publish.

Your assets have now been published.

1.1.2.5 Publish CitiSignal website

Click the Adobe Experience Manager product name in the top left corner of your screen and then click the arrow next to Assets.

Next, click Sites.

You should then see your CitiSignal website which was created after installing the package before.

In order to link your site to the GitHub repository that you created before, you need to create an Edge Delivery Services Configuration.

The first step to do that is to create a Cloud Configuration.

To do that, click the Adobe Experience Manager product name in the top left corner of your screen, then click the tools icon and then select General. Click to open Configuration Browser.

You should then see this. Click Create

Set the fields Title and Name to CitiSignal. Enable the checkbox for Cloud Configurations.

Click Create.

You should then have this.

Next, you need to update some fields of the Cloud Configuration you just created.

To do that, click the Adobe Experience Manager product name in the top left corner of your screen, then click the tools icon and then select Cloud Services. Click to open Edge Delivery Services Configuration.

Select CitiSignal, click Create and select Configuration.

You now need to fill out the fields Organization and Site Name. To do that, first have a look ath the URL of your GitHub repository.

Click Save & Close.

You should then have this. Enable the checkbox in front of your newly create Edge Cloud Configuration and click Publish.

1.1.2.6 Update file paths.json

In your GitHub repo, click to open the file paths.json.

Click the edit icon.

You now need to update the replace the text aem-boilerplate-commerce by CitiSignal on lines 3, 4, 5, 6, 7 and 10.

Click Commit Changes.

Click Commit Changes.

The file paths.json has now been updated.

1.1.2.7 Publish CitiSignal website

Click the Adobe Experience Manager product name in the top left corner of your screen and then select Sites.

Next, click the checkbox in front of CitiSignal. Then, click Manage Publication.

Click Next.

Click Include Children Settings.

Click to select the checkbox Include children and then click to unselect the other checkboxes. Click OK.

Click Publish.

You’ll then be sent back here. Click CitiSignal, select the checkbox in front of index and then click Edit.

Your website will then open in the Universal Editor.

You will now be able to acces your website by going to main--citisignal-aem-accs--XXX.aem.page and/or main--citisignal-aem-accs--XXX.aem.live, after replacing XXX by your GitHub user account, which in this example is woutervangeluwe.

In this example, the full URL becomes this:
https://main--citisignal-aem-accs--woutervangeluwe.aem.page and/or https://main--citisignal-aem-accs--woutervangeluwe.aem.live.

It may take some time before all the assets are shown correctly, as they need to be published first.

You’ll then see this:

1.1.2.8 Test Page Performance

Go to https://pagespeed.web.dev/. Enter your URL and click Analyze.

You’ll then see that your website, in both a mobile and desktop visualization, gets a high score:

Mobile:

Desktop:

Next Step: Develop a custom block

Go Back to Adobe Experience Manager Cloud Service & Edge Delivery Services

Go Back to All Modules