AEM Headless quick setup for AEM as a Cloud Service

Navigate to https://my.cloudmanager.adobe.com

Select the Cloud Manager Program that contains the AEM as a Cloud Service environment to use for this quick setup

Create a Git repository for the WKND Site project

1. Select Repositories in the top navigation
2. Select Add Repository in the top action bar
3. Name the new Git repository: aem-headless-quick-setup-wknd
   • Git repository names must be unique per Adobe organization,
4. Select Save, and wait for the Git repository to initialize

From the command line, clone the sample WKND Site project’s source code from GitHub

$ mkdir -p ~/Code
$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd.git

Add the Cloud Manager Git repository as a remote

1. Select Repositories in the top navigation

2. Select Access Repo Info from the top action bar

3. Execute command found in Add a remote to your Git repository from the command-line

   code language-shell
   $ cd aem-guides-wknd $ git remote add adobe https://git.cloudmanager.adobe.com/<YOUR ADOBE ORGANIZATION>/aem-headless-quick-setup-wknd/

Push the sample project’s source code from your local Git repository to the Cloud Manager Git repository

$ git push adobe main:main

When prompted for credentials, provide the Username and Password from Cloud Manager’s Repository Info modal.

Attach a Non-production deployment pipeline to the new Git repository

1. Select Pipelines in the top navigation

2. Select Add Pipeline from the top action bar

3. On the Configuration tab

   1. Select Deployment Pipeline option
   2. Set the Non-Production Pipeline Name to Dev Deployment pipeline
   3. Select Deployment Trigger > On Git Changes
   4. Select Important Metric Failures Behavior > Continue Immediately
   5. Select Continue

4. On the Source Code tab

   1. Select Full Stack Code option
   2. Select the AEM as a Cloud Service development environment from the Eligible Deployment Environments select box
   3. Select aem-headless-quick-setup-wknd in the Repository select box
   4. Select main from the Git Branch select box
   5. Select Save

Run the Dev Deployment Pipeline

1. Select Overview in the top navigation
2. Locate the newly created Dev Deployment pipeline in the Pipelines section
3. Select the … to the right of the pipeline entry
4. Select Run, and confirm in the modal
5. Select the … to the right of the now-running pipeline
6. Select View details

From the pipeline execution’s details, monitor progress until it successfully completed. Pipeline execution should take between 30-40 minutes.

From the command line, clone the React App’s source code from GitHub.

$ cd ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

Open the folder ~/Code/aem-guides-wknd-graphql/react-app in your IDE.

In the IDE, open the file .env.development.

Point to the AEM as a Cloud Service Publish service’s host URI from the REACT_APP_HOST_URI property.

REACT_APP_HOST_URI=https://publish-pXXXX-eYYYY.adobeaemcloud.com
...

To find your AEM as a Cloud Service Publish service’s host URI:

1. In Cloud Manager, select Environments in the top navigation
2. Select Development environment
3. Locate the Publish Service (AEM & Dispatcher) link Environment Segments table
4. Copy the link’s address, and use it as the AEM as a Cloud Service Publish service’s URI

In the IDE, save the changes to .env.development

From the command line, run the React App

$ cd ~/Code/aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

The React App, running locally, starts on http://localhost:3000 and displays a listing of adventures, which are sourced from AEM as a Cloud Service using AEM Headless’ GraphQL APIs.

Log in to AEM as a Cloud Service Author service

Navigate to Assets > Files > WKND Shared > English > Adventures

Open the Cycling Southern Utah Folder

Select the Cycling Southern Utah Content Fragment, and select Edit from the top action bar

Update some of the fields of the Content Fragment, for example:

• Title: Cycling Utah's National Parks
• Trip Length: 6 Days
• Difficulty: Intermediate
• Price: 3500
• Primary Image: /content/dam/wknd-shared/en/activities/cycling/mountain-biking.jpg

Select Save in the top action bar

Select Quick Publish from the top action bar’s …

Refresh the React App running on http://localhost:3000.

In the React App, select the now updated Cycling adventure, and verify the content changes made to the Content Fragment.

Using the same approach, in AEM Author service:

1. Unpublish an existing Adventure Content Fragment, and verify it is removed from the React App experience
2. Create and publish a new Adventure Content Fragment, and verify it appears in the React App experience